一、Flex 容器的属性

1. 弹性容器

display: flex;

2. 主轴方向 flex-direction
   属性值：row 默认、row-reverse、column、column-reverse

flex-direction: row;

3. 主轴是否换行 flex-wrap
   属性值：nowrap 默认、wrap、wrap-reverse

flex-wrap: wrap;

4. 合并主轴方向和主轴是否换行两个属性 flex-flow

flex-flow: row nowrap;

5. 主轴方向对齐方式 justify-content
   属性值：flex-start 默认、center、flex-end、space-around、space-between

justify-content: center;

6. 交叉轴方向对齐方式 align-items
   属性值：stretch（交叉轴拉伸对齐） 默认、flex-start、center、flex-end、baseline（文字底线对齐）

align-items: stretch;

7. 多交叉轴方向对齐方式 align-content
   当弹性容器 flex-wrap 属性为 wrap 且子项目超出换行时触发 align-content 属性，不超出不触发
   属性值：stretch（拉伸对齐） 默认、flex-start 默认、center、flex-end、space-around、space-between

align-content: stretch;

二、Flex 容器的子项目属性

1. 定义子项目的排列顺序 order
   属性值：数字，数值越小，排列越靠前，默认为 0

order: 0;

2. 定义子项目的放大比例，flex-grow
   当主轴方向未被子项目填满时生效
   属性值：数字，代表占比，默认为 0

flex-grow: 0;

3. 定义子项目的缩小比例，flex-shrink
   当弹性容器 flex-wrap 属性为 nowrap 且主轴方向被子项目填满超出时生效
   属性值：数字，代表占比，默认为 1

flex-shrink: 1;

4. 定义子项目的分配空间，flex-basis
   属性值：数字单位，长宽值，默认为 auto

flex-basis: 0px;

5. 合并定义子项目的放大、缩小比例、分配空间三个属性 flex
   属性值：数字，默认为 0。

flex: 1;

6. 定义当前单个子项目的属性 align-self
   属性值：auto 默认值、flex-start、center、flex-end、baseline、stretch，默认值为 auto

align-self: auto;