flex布局

父级属性

1. flex-direction: row(默认) | row-reverse | column | column-reverse ： 主轴方向
2. justify-content: flex-start(默认) | flex-end | center | space-around | space-between | space-evenly ： 主轴对齐方式
3. flex-wrap: nowrap(默认) | wrap | wrap-reverse : 是否换行
4. align-item: flex-start | flex-end | center | stretch(默认，拉伸) | baseline（第一行文字的基线对齐） ： （单行）侧轴对齐方式
5. align-content: flex-start | flex-end | center | space-around | stretch(拉伸) ： （多行）定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
6. flex-flow: 是复合属性；flex-direction | flex-wrap

子级属性

1. align-self: flex-start | flex-end | center | stretch | baseline | auto(默认值) ; 可覆盖align-items属性，默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于strech；
2. order: 定义项目的排列顺序;数值越小，排列越靠前，默认为0.
3. flex-basis: | auto（默认值）; 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
4. flex-grow: ; 默认值为 0，即如果存在剩余空间，也不放大(MDN)
5. flex-shrink: ；定义了项目的缩小比例。默认值为1，即如果空间不足，该项目将缩小，负值对该属性无效。如果该值为0，即不进行缩小。
6. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] : 复合属性

---

参考： 知乎