flex弹性盒子常用的布局属性详解

在Flex布局中，常用的几个属性包括：

1. flex-direction：定义了flex项在容器中的方向。
2. justify-content：定义了flex项在主轴方向上的对齐方式。
3. align-items：定义了flex项在交叉轴方向上的对齐方式。
4. flex-wrap：定义了flex项在一条轴线上不能全部展示时的换行方式。
5. align-content：定义了多根轴线对齐方式，仅在flex-wrap属性为wrap时有效。

以下是这些属性的简单示例代码：

.container {
  display: flex; /* 启用Flex布局 */
  flex-direction: row; /* 默认值，水平从左到右 */
  justify-content: flex-start; /* 默认值，左对齐 */
  align-items: center; /* 居中对齐，在交叉轴方向 */
  flex-wrap: wrap; /* 允许换行 */
  align-content: space-around; /* 在多行之间均匀分布空间 */
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- 更多的flex项 -->
</div>

这段代码会创建一个flex容器，其中包含几个flex项，并且这个容器被设置为水平方向的布局，项目会在容器内居中对齐，并且如果空间不足，会允许项目换行，多行之间使用空间分布。