CSS align-items 属性

align-items 属性用于在 flex 容器中设置项目在交叉轴上的对齐方式。它可以接受以下几个值：

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

语法

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

示例

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

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

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

在上面的示例中，.container 是一个 flex 容器，设置了 align-items: center;，这会使容器中的项目在交叉轴上居中对齐。.item 是容器中的项目，设置了一些基本样式。

通过调整 align-items 的值，可以在项目在交叉轴上采取不同的对齐方式，从而实现灵活的布局效果。