flex布局的对齐方式

Flex布局的对齐方式可以通过以下几个属性来控制：

1. justify-content：控制水平轴上的对齐方式（例如行内元素的水平对齐）。
2. align-items：控制垂直轴上的对齐方式（例如行内元素的垂直对齐）。
3. align-self：允许单个flex子项有与其他子项不同的垂直对齐方式。
4. align-content：在具有多条轴线的flex容器上，该属性用于控制轴线之间的对齐方式。

以下是这些属性的一些常用值：

• flex-start：对齐到行或列的开始。
• flex-end：对齐到行或列的结束。
• center：居中对齐。
• space-between：两端对齐，中间间隔相等。
• space-around：每个项目两侧的间隔相等。
• space-evenly：项目之间的间隔以及与容器边缘的间隔相等。

示例代码：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* 或者使用flex-wrap: wrap;时使用align-content */
  align-content: space-around; 
}
 
.item {
  /* 可以对单个子项进行垂直对齐控制 */
  align-self: flex-end; 
}

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

在这个例子中，.container 是一个flex容器，它将其子项 .item 在水平和垂直方向上居中对齐。align-self 在.item上使用，可以使每个子项有不同的垂直对齐方式。