CSS弹性盒模型 display flex布局

容器属性

flex-flow
flex-direction
flex-wrap
justify-content
align-items
align-content

元素属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

弹性盒模型

flex-direction 容器项目的排列方向（默认是横向排列）
flex-wrap 容器内项目的换行方式
flex-flow flex-direction 和 flex-wrap 属性的复合属性。

justify-content 项目在主轴上对齐样式

align-item　　项目在交叉轴上如何对齐
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

容器内如何对象对齐

主轴justify-content上
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。 两端对齐
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
initial 设置该属性为它的默认值。请参阅 initial。

交叉轴align-item上
stretch 默认值 撑满这个元素 如果元素高度未设置 或设为auto
flex-start 沿交叉轴起点对齐
flex-end 沿交叉轴终点对齐
center沿交叉轴中点对齐
baseline 沿第一文字基线对齐

1.主轴交叉轴排列方式

默认主轴排序 flex-direction:row

主轴交叉轴互换 flex-direction:column column 上→下

主轴交叉轴起点为右 flex-direction:row-reverse row-reverse 左←右

主轴交叉轴起点为左下 flex-direction:column-reverse column-reverse 上←下

2 .沿主轴的排列处理

flex-wrap: nowrap | wrap | wrap-reverse 主轴上的元素不折行、折行、反向折行

默认是nowrap不折行

wrap折行，顾名思义就是另起一行

wrap-reverse反向折行，是从容器底部开始的折行，但每行元素之间的排列仍保留正向

3.一个复合属性

flex-flow = flex-drection + flex-wrap

flex-flow相当于规定了flex布局的“工作流(flow)”

flex-flow: row nowrap;

4.元素如何弹性伸缩应对

flex-wrap: nowrap;不折行时
flex-shrink：缩小比例（容器宽度<元素总宽度时如何收缩）
flex-shrink默认为1，也就是当不够分配时，元素都将等比例缩小，占满整个宽度

flex-grow：放大比例（容器宽度>元素总宽度时如何伸展）
flex-basis：设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。

符合属性 flex = flex-grow + flex-shrink + flex-basis

除了在容器上设置交叉轴对齐，还可以通过align-self单独对某个元素设置交叉轴对齐方式。
值与align-items相同
可覆盖容器的align-items属性
默认值为auto，表示继承父元素的align-items属性

flex = flex-grow + flex-shrink + flex-basis