Flexbox 是一种非常强大的前端布局工具，它可以帮助我们轻松地构建响应式、灵活的布局。其中，align-items 属性是 flex 容器中的一个重要属性，它决定了 flex 项目在交叉轴（如：垂直轴）方向上的对齐方式。在本文中，我们将详细解析 align-items 的使用方法，以及如何合理地运用它来实现优美的布局。
align-items 的取值
在使用 align-items 属性时，需要先了解其可用的取值。具体而言，align-items 可取以下几种值：
- flex-start：将 flex 项目对齐到交叉轴（垂直轴）的起点位置。
- flex-end：将 flex 项目对齐到交叉轴（垂直轴）的终点位置。
- center：将 flex 项目在交叉轴方向上居中对齐。
- baseline：将 flex 项目按照其基线对齐。
- stretch：将 flex 项目在交叉轴方向上拉伸，以占据整个 flex 容器的高度。
align-items 的使用实例
为了更好地理解 align-items 的使用方法，我们来看一个实例。假设有以下 HTML 代码：
<div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div>
接着，为这些元素添加 CSS 样式：
// www.javascriptcn.com code example
.container {
display: flex;
height: 100px;
flex-direction: row;
align-items: center;
}
.item {
height: 50px;
width: 50px;
background-color: #fff;
border: 1px solid #999;
}
.item1 {
background-color: #f00;
}
.item3 {
background-color: #00f;
}这里我们定义了一个高度为 100px 的水平方向的 flex 容器，容器中包含三个高50px的元素，如下图所示。
我们可以试着分别修改 align-items 属性的取值，看看三个元素会有哪些变化。
如果将 align-items 属性的取值改为 flex-start，则三个元素会出现如下排列：
.container {
align-items: flex-start;
}
如果将 align-items 属性的取值改为 flex-end，则三个元素会出现如下排列：
.container {
align-items: flex-end;
}
如果我们将 align-items 属性的取值改为 center，则三个元素会出现如下排列：
.container {
align-items: center;
}
如果将 align-items 属性的取值改为 baseline，则三个元素会出现如下排列：
.container {
align-items: baseline;
}
最后，如果我们将 align-items 属性的取值改为 stretch，则三个元素会出现如下排列：
.container {
align-items: stretch;
}
align-items 的应用场景
通过上面的例子，我们可以看到，align-items 属性能够改变 flex 项目在交叉轴方向上的对齐方式。而在实际开发中，我们也可以根据具体布局需求，合理地运用这一属性，以实现更加优美的布局效果。
其中，比较常见的一种场景是垂直居中排列。在这种情况下，我们可以将 align-items 属性的取值设为 center，以实现 flex 项目在交叉轴方向上的居中对齐，如上面的实例所示。
此外，我们也可以根据具体情况，调整 align-items 的取值，以实现不同的布局效果。例如，在实现类似于瀑布流式布局的时候，我们可以将 align-items 属性设置为 stretch，使得每一列的高度能够自适应，并保持对齐。
总之，灵活地运用 align-items 属性，能够帮助我们更加高效、优美地实现各种布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca9422e46428fe9e2e06bd