flex布局的各个属性

以下是Flex布局的常见属性及其含义：

1. 父容器的属性
- display：定义为flex布局
- flex-direction：定义主轴的方向
- flex-wrap：定义是否要换行
- flex-flow：flex-direction 和 flex-wrap 的复合属性
- justify-content：定义主轴上的对齐方式
- align-items：定义交叉轴上的对齐方式
- align-content：定义多根轴线的对齐方式

2. 子元素的属性
- order：定义子元素的排列顺序
- flex-grow：定义子元素的放大比例
- flex-shrink：定义子元素的缩小比例
- flex-basis：定义子元素在分配多余空间之前的基准大小
- flex：flex-grow, flex-shrink 和 flex-basis 的复合属性
- align-self：定义单个子元素在交叉轴上的对齐方式

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

.container {
  display: flex; /* 定义为flex布局 */
  flex-wrap: wrap; /* 定义为可换行 */
  justify-content: center; /* 在主轴上居中对齐 */
  align-items: center; /* 在交叉轴上居中对齐 */
}

.box {
  order: 2; /* 定义排列顺序为2 */
  flex-grow: 1; /* 定义放大比例为1 */
  flex-shrink: 1; /* 定义缩小比例为1 */
  flex-basis: 100px; /* 定义基准大小为100px */
  flex: 1 1 100px; /* 上面三个属性的复合属性 */
  align-self: center; /* 在交叉轴上居中对齐 */
}