代码之家 › 专栏 › 技术社区 › vsync

垂直对齐的挠性箱元件

flexbox css

vsync · 技术社区 · 10 年前

旧的 display:box 具有垂直调整元素的能力,因此 N 具有的元素数 H 定义的高度,它们将自行调整( 垂直地 )相对于父元素。

是否有任何方法可以使用电流 dislpay:flex 系统

2 回复 | 直到 10 年前

Maximillian Laumeister 10 年前

您正在寻找弹性规则 justify-content: space-between; 。将其放在父元素上,它将对齐项目,以便第一个项目接触容器的开始,最后一个项目接触到容器的结束,其余空间分布在元素之间。

您也可以使用 align-items 将元素沿垂直于弯曲方向的方向对齐。例如,如果您的 flex-direction 是 column (垂直),然后 justify-content 将垂直对齐项目 对齐项目 将它们水平对齐。相反,如果您的 挠曲方向 是 row (水平),然后 调整内容 将水平对齐项目 对齐项目 将它们垂直对齐。

更多信息请点击此处: https://css-tricks.com/snippets/css/a-guide-to-flexbox/