容器属性
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