flex弹性布局

前端自学笔记

---

作用在flex容器上

1. flex-direction 用来控制子项整体布局的方向，从左往右还是从右往左，从上往下还是从下往上

取值	含义
row	默认值。显示为行，方向从左向右
row-reverse	显示为行，方向与row相反
column	显示为列
column-reverse	显示为列，方向与column相反

2. flex-wrap 用来控制子项整体单行显示还是换行显示

取值	含义
nowrap	默认值，单行显示，不换行
wrap	宽度不足换行显示
wrap-reverse	宽度不足换行显示，但是从下往上开始

3. flex-flow 是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性，第一个值表示方向，第二个值表示换行，中间用空格隔开
4. justify-content 决定主轴方向上子项的对齐和排列方式

取值	含义
flex-start	默认值，起始位置对齐
flex-end	结束位置对齐
center	居中对齐
space-between	两端对齐
space-around	环绕，每个flex子项两侧都环绕互不干扰的等宽的空白间距
space-evenly	视觉上，每个flex子项两侧空白间距完全相等

5. align-items 指flex子项们相对于flex容器在侧轴方向上的对齐方式（针对一行当中的每个子项）

取值	含义
stretch	默认值，flex子项拉伸
flex-start	容器顶部对齐
flex-end	容器底部对齐
center	垂直居中对齐

6. align-content 和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性没有任何效果（针对多行之间）

取值	含义
stretch	默认值，每一行flex子元素都等比拉伸
flex-start	起始位置对齐
flex-end	结束位置对齐
center	居中对齐
space-between	两端对齐
space-around	每一行元素上下都享有独立不重叠的空白空间
space-evenly	每一行元素都完全上下等分

---

作用在flex子项上

取值	含义
order	排序。可以通过设置order改变某一个flex子项的排序位置，默认order属性值为0
flex-grow	扩展。扩展的是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙，默认值为0
flex-shrink	主要处理当flex容器空间不足时，单个元素的收缩比例，默认值为1
flex-basis	定义了在分配剩余空间之前元素的默认大小
flex	是flex-grow，flex-shrink和 flex-basis的缩写，默认0,1，auto
align-self	指控制单独某一个flex子项的垂直对齐方式