这个问题涉及到一个包括flexbox在内的完全支持css3的浏览器.

我有一个装有一些物品的弹性容器.他们都是有理由的弹性开始,但我希望last,.end项目是有理由的弹性结束.有没有一种好的方法可以在不修改HTML和不诉诸绝对定位的情况下做到这一点?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}
<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

推荐答案

Flexible Box Layout Module - 8.1. Aligning with auto margins

flex项目上的自动边距与block flow中的自动边距效果非常相似:

  • 在计算弹性基准和弹性长度时,自动边距被视为0.

  • 在通过justify-contentalign-self对齐之前,任何正的自由空间都分布到该维度上的自动页边距.

因此,可以使用margin-top: auto在其他元素和最后一个元素之间分配空间.

这会将最后一个元素定位在底部.

p:last-of-type {
  margin-top: auto;
}

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}
<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

vertical example


同样,对于同一水平对齐,也可以使用margin-left: automargin-right: auto.

p:last-of-type {
  margin-left: auto;
}

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}
<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

horizontal example

Css相关问答推荐

为什么 KaTeX 的彩虹文本只能在 Firefox 上运行?

为什么 width: 100% 在 Flex 父级中缩小这个 div ?

Img 未拉伸以满足所需的纵横比

我可以拆分我的 CSS / SASS webpack 加载器规则,还是它们需要成为一个大规则?

我想在视频上使用混合混合模式的 svg

使用任意运行时字符串进行 Tailwind CSS 类定位

子组件的css会影响整个页面

在 CSS 中相对于另一个元素定位一个元素

  • 元素上的子弹来自哪里?
  • 在 RC.1 中,某些样式无法使用绑定语法添加

    如何强制 div 出现在下方而不是旁边?

    边框半径 + 背景 colored颜色 == 裁剪边框

    如何更改 Angular Material 上 mat-icon 的大小?

    如何在 javascript 中获取 HTML 元素的样式值?

    CSS3 box-shadow:inset 可以只做一侧或两侧吗?喜欢边界顶部?

    在移动网络上禁用捏zoom

    css 中的 clearfix 类有什么作用?

    在 CSS 中结合border-top、border-right、border-left、border-bottom

    仅当存在 2 个类时,您可以使用 CSS 定位元素吗?

    如何规范跨浏览器的 CSS3 过渡结束事件?