flex属性汇总

flex属性作用在块级元素和内联元素时的用法分别为display:flex  display:inline-flex

作用在父容器上的属性有：

flex-direction: row | row-reverse | column | column-reverse // 控制主轴的方向

flex-wrap: wrap | nowrap | wrap-reverse // 控制主轴上元素的换行方式

flex-flow: 前两个属性的合并写法

justify-content: center | flex-start | flex-end | space-between | space-around | space-evenly // 控制主轴上元素的对齐方式

align-items: center | flex-start | flex-end | stretch | baseline // flex子项们相对于flex容器在垂直方向上的对齐方式

align-content: center | flex-start | flex-end | space-between | space-around | space-evenly // 控制垂直方向每行的对齐方式（只有多行的情况下才会起作用）

作用在item元素上的属性：

order: 0 // 设置了该属性的元素 会根据该属性的大小进行排序

flex-grow: 0 // 占据当前行剩余空间的比例

flex-shrink: 1 // 主要处理当flex容器空间不足时候，单个元素的收缩比例，空间不足的情况下默认全部收缩

flex-basis: auto // 分配剩余空间之前元素的默认大小

flex: 上面三个元素的合并缩写形式

align-self: auto | flex-start | flex-end | center | baseline | stretch // 控制单独某一个flex子项的垂直对齐方式