flex布局

Flex布局是CSS3中新增的一种布局方式，它可以使容器中的子元素实现灵活的定位和对齐，并且不需要通过浮动和定位等传统方式来实现。Flex布局应用于父容器上，通过设置父元素的属性来控制子元素的排列方式。

以下是Flex布局中常用的属性：

1. display：用于定义容器为一个Flex容器，属性值为flex或inline-flex。
2. flex-direction：用于定义主轴方向，属性值有row（从左到右，默认值）、row-reverse（从右到左）、column（从上到下）和column-reverse（从下到上）。
3. justify-content：用于定义主轴方向上的对齐方式，属性值有flex-start（默认值，靠左对齐）、flex-end（靠右对齐）、center（居中对齐）、space-between（两端对齐，子元素之间平均分配空间）、space-around（子元素周围平均分配空间）。
4. align-items：用于定义交叉轴方向上的对齐方式，属性值有flex-start、flex-end、center、baseline（基线对齐，适用于子元素有不同字体大小时）和stretch（默认值，子元素拉伸填满容器）。
5. flex-wrap：用于定义子元素是否换行，属性值有nowrap（默认值，不换行）、wrap（换行）和wrap-reverse（反向换行）。
6. align-content：用于定义多行子元素的对齐方式，属性值有flex-start、flex-end、center、space-between、space-around和stretch（默认值）。

以下是一个Flex布局的示例代码：

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复制代码
.container {
  display: flex; /* 定义容器为Flex容器 */
  flex-direction: row; /* 定义主轴方向为从左到右 */
  justify-content: space-between; /* 定义子元素两端对齐并平分空间 */
  align-items: center; /* 定义子元素在交叉轴上居中对齐 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

以上代码将创建一个横向的Flex容器，其中包含三个子元素，它们会在容器中水平排列，并且两端对齐并平均分配空间。子元素也会在交叉轴上居中对齐。