Flexbox 是一种用于布局的 CSS 技术，可以通过 align-items 属性来控制 flex 容器中子元素的侧轴（垂直方向）对齐方式。
以下是一些常见的 align-items 取值以及其作用：
flex-start：子元素在侧轴起点对齐。
flex-end：子元素在侧轴终点对齐。
center：子元素在侧轴居中对齐。
baseline：子元素在基线对齐。
stretch：子元素沿侧轴方向拉伸填充整个 flex 容器。
下面是一个例子，展示如何使用 align-items 属性来实现不同的侧轴对齐方式：
<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>
<style>
.container {
display: flex;
height: 200px;
align-items: center; /* 侧轴居中对齐 */
}
.item {
width: 100px;
height: 50px;
background-color: lightblue;
margin: 10px;
}
</style>
在上面的代码中，我们使用了 align-items: center 将子元素在侧轴上居中对齐。你可以尝试将 align-items 属性的值改为其他的取值，看看子元素的侧轴对齐方式会发生怎样的变化。
除了 align-items 属性，还有其他一些属性可以影响 flex 容器和子元素的侧轴对齐方式：
align-self：用于单个子元素，可以覆盖 align-items 属性设置的侧轴对齐方式。
justify-content：用于控制主轴方向上子元素的对齐方式。
flex-direction：用于控制 flex 容器中主轴和侧轴的方向。
下面是一个例子，展示如何同时使用这些属性来实现复杂的布局：
<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>
<style>
.container {
display: flex;
flex-direction: column;
height: 200px;
justify-content: space-between; /* 主轴两端对齐 */
}
.item {
width: 100px;
height: 50px;
background-color: lightblue;
margin: 10px;
align-self: flex-end; /* 自身在侧轴终点对齐 */
}
</style>
在上面的代码中，我们使用了 flex-direction: column 将 flex 容器的主轴方向设置为垂直方向。然后，我们使用了 justify-content: space-between 将子元素在主轴方向上两端对齐。最后，我们使用了 align-self: flex-end 将子元素在侧轴方向上自身对齐到终点。这样，我们就实现了一个在垂直方向上两端对齐，但是子元素在侧轴上分别对齐到容器顶部、中间和底部的布局效果。