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

垂直对齐的挠性箱元件

  •  6
  • vsync  · 技术社区  · 10 年前

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

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

    2 回复  |  直到 10 年前
        1
  •  11
  •   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/

        2
  •  0
  •   mwl    10 年前

    具有 display: flex 你有 justify-content 用于水平对齐和 align-items 用于垂直对齐。