CSS3 引入的 Flex 布局是一种强大而灵活的布局方式，通过设置容器和子元素的 Flex 属性，可以实现各种复杂的布局。本文将深入解读 Flex 布局中常用的参数，包括容器属性和子元素属性。
1. 容器属性
1.1 display
- 值：
flex|inline-flex - 说明： 指定容器是一个 Flex 容器。
flex值将创建一个块级容器，inline-flex值将创建一个行内容器。
1.2 flex-direction
- 值：
row|row-reverse|column|column-reverse - 说明： 定义主轴的方向。
row表示水平方向（默认），column表示垂直方向。row-reverse和column-reverse分别表示反向方向。
1.3 flex-wrap
- 值：
nowrap|wrap|wrap-reverse - 说明： 定义是否换行。
nowrap表示不换行（默认），wrap表示换行，wrap-reverse表示反向换行。
1.4 justify-content
- 值：
flex-start|flex-end|center|space-between|space-around|space-evenly - 说明： 定义项目在主轴上的对齐方式。各值的具体效果可通过示例代码来演示。
1.5 align-items
- 值：
flex-start|flex-end|center|baseline|stretch - 说明： 定义项目在交叉轴上的对齐方式。各值的具体效果可通过示例代码来演示。
1.6 align-content
- 值：
flex-start|flex-end|center|space-between|space-around|stretch - 说明： 定义多根轴线的对齐方式（当项目超过一行时）。各值的具体效果可通过示例代码来演示。
2. 子元素属性
2.1 order
- 值：
<integer> - 说明： 定义项目的排列顺序。数值越小，排列越靠前。
2.2 flex-grow
- 值：
<number> - 说明： 定义项目的放大比例。默认为
0，即不放大。当存在剩余空间时，项目将按照比例进行放大。
2.3 flex-shrink
- 值：
<number> - 说明： 定义项目的缩小比例。默认为
1，即允许缩小。当空间不足时，项目将按照比例进行缩小。
2.4 flex-basis
- 值：
<length>|auto - 说明： 定义在分配多余空间之前，项目占据的主轴空间。默认为
auto，即由项目的本身大小决定。
2.5 flex
- 值：
<flex-grow>|<flex-shrink>|<flex-basis> - 说明： 该属性是
flex-grow,flex-shrink,flex-basis的缩写。默认值为0 1 auto。
2.6 align-self
- 值：
auto|flex-start|flex-end|center|baseline|stretch - 说明： 定义单个项目在交叉轴上的对齐方式，覆盖容器的
align-items属性。
