CSS 属性:box-align
box-align
属性用于指定弹性布局中项目在交叉轴上的对齐方式。这个属性只在使用了弹性盒子布局(flexbox)的容器中生效。
语法
---- - ---------- ----- - ------ - --- - -------- - -------- -
start
:项目在交叉轴的起始位置对齐。center
:项目在交叉轴的中间位置对齐。end
:项目在交叉轴的末尾位置对齐。baseline
:项目的基线对齐。stretch
:项目沿着交叉轴拉伸以适应容器。
示例
假设有以下 HTML 结构:
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
使用以下 CSS 样式:
---------- - -------- ----- --------------- ---- ------------ ------- - ----- - ------ ------ ------- ----- ----------------- ---------- ------- ---- ---------- ------- -
在这个例子中,.container
是一个使用了 flexbox 布局的容器,.item
是容器中的项目。通过设置 .item
的 box-align
属性为 center
,项目在交叉轴上居中对齐。
以上就是 box-align
属性的用法和示例。