CSS 参考手册 目录

CSS3 box-align 属性

CSS 属性:box-align

box-align 属性用于指定弹性布局中项目在交叉轴上的对齐方式。这个属性只在使用了弹性盒子布局(flexbox)的容器中生效。

语法

---- -
  ---------- ----- - ------ - --- - -------- - --------
-
  • start:项目在交叉轴的起始位置对齐。
  • center:项目在交叉轴的中间位置对齐。
  • end:项目在交叉轴的末尾位置对齐。
  • baseline:项目的基线对齐。
  • stretch:项目沿着交叉轴拉伸以适应容器。

示例

假设有以下 HTML 结构:

---- ------------------
  ---- ----------------- -------
  ---- ----------------- -------
  ---- ----------------- -------
------

使用以下 CSS 样式:

---------- -
  -------- -----
  --------------- ----
  ------------ -------
-

----- -
  ------ ------
  ------- -----
  ----------------- ----------
  ------- ----
  ---------- -------
-

在这个例子中,.container 是一个使用了 flexbox 布局的容器,.item 是容器中的项目。通过设置 .itembox-align 属性为 center,项目在交叉轴上居中对齐。

以上就是 box-align 属性的用法和示例。


上一篇:CSS 属性 bottom
下一篇:CSS 属性 box-direction