flex弹性布局详细介绍

Flexbox（弹性布局模块）是CSS3新引入的一种布局方式，它能够提供一种更简单的方式来设计弹性的布局，无论是列或者是行，并且可以很容易的做到当内容增加或减少时，布局能够适应这种变化。

Flexbox布局的主要特点：

1. 弹性布局容器的主轴（main axis）和交叉轴（cross axis）。
2. 容器内的每个子元素称作项目（item）。
3. 主轴方向上的项目排列称为主轴对齐（main-axis alignment）。
4. 交叉轴方向上的项目排列称为交叉轴对齐（cross-axis alignment）。
5. 容器可以设置为单行或多行。

Flexbox布局的属性：

1. display: 设置或检索布局为flex或inline-flex。
2. flex-direction: 设置主轴方向。
3. flex-wrap: 设置是否换行。
4. flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap。
5. justify-content: 设置主轴上的对齐方式。
6. align-items: 设置交叉轴上的对齐方式。
7. align-self: 项目自身在交叉轴的对齐方式。
8. flex-grow: 项目的放大比例。
9. flex-shrink: 项目的缩小比例。
10. flex-basis: 项目的初始大小。
11. flex: 复合属性，相当于同时设置了flex-grow, flex-shrink和flex-basis。
12. order: 项目的排列顺序。

以下是一个简单的Flexbox布局示例：

HTML:

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

CSS:

.flex-container {
  display: flex; /* 使用弹性布局 */
  flex-direction: row; /* 主轴方向为水平 */
  justify-content: center; /* 主轴上水平居中 */
  align-items: center; /* 交叉轴上垂直居中 */
}
 
.flex-item {
  width: 50px; /* 项目宽度 */
  height: 50px; /* 项目高度 */
  margin: 5px; /* 项目间距 */
}

这个例子中，.flex-container 类使得div成为一个弹性容器，.flex-item 类应用于容器内的每个子元素。这个布局会在容器中水平居中并垂直居中所有子元素。