CSS3 box-align 属性

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

语法

.box {
  box-align: start | center | end | baseline | stretch;
}

• start：项目在交叉轴的起始位置对齐。
• center：项目在交叉轴的中间位置对齐。
• end：项目在交叉轴的末尾位置对齐。
• baseline：项目的基线对齐。 如果 box-orient 是内嵌单轴或横向，所有的子元素都置于他们的基线对齐。
• stretch：项目沿着交叉轴拉伸以适应容器。

示例

假设有以下 HTML 结构：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

使用以下 CSS 样式：

// www.javascriptcn.com code example
.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
  box-align: center;
}

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

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