Skip to main content

align-items 属性

Docs

align-items - CSS：层叠样式表 | MDN (mozilla.org)

align-items 决定了 flex items 在 cross axis 上的对齐方式

  • normal：在弹性布局中，效果和 stretch 一样
  • stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
  • flex-start：与 cross start 对齐
  • flex-end：与 cross end 对齐
  • center：居中对齐
  • baseline：与基准线对齐

align-items 是 CSS 中用于控制容器中的项目在交叉轴上的对齐方式的属性。它可以应用于 flex 容器和 grid 容器。

align-items 属性的可选值如下：

  • stretch：默认值，项目将被拉伸以适应容器的高度（在 flex 容器中）或宽度（在 grid 容器中）。这意味着项目将沿着交叉轴占据整个容器的高度或宽度。
  • flex-start：项目在交叉轴的起始边缘对齐。
  • flex-end：项目在交叉轴的结束边缘对齐。
  • center：项目在交叉轴上居中对齐。
  • baseline：项目在基线上对齐。基线是项目内文本的基线。
  • initial：将属性重置为其初始值。
  • inherit：继承父元素的属性值。

举个例子，如果你有一个垂直方向上的 flex 容器，而它包含了三个项目，那么 align-items 属性将决定这三个项目在容器内的垂直对齐方式。

  • 如果你将 align-items 设置为 flex-start，那么所有项目都将沿着容器的顶部对齐。
  • 如果你将其设置为 flex-end，则所有项目都将沿着容器的底部对齐。
  • 如果你将其设置为 center，则所有项目都将沿着容器的垂直中心线对齐。
Details