# Flex

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

class Properties 说明
flex-1 flex: 1; 设置或检索弹性盒模型分配空间数值为1
flex-2 flex: 2; 设置或检索弹性盒模型分配空间数值为2
flex-3 flex: 3; 设置或检索弹性盒模型分配空间数值为3
flex-4 flex: 4; 设置或检索弹性盒模型分配空间数值为4
flex-5 flex: 5; 设置或检索弹性盒模型分配空间数值为5

# Flex Direction

flex-direction 属性规定灵活项目的方向

class Properties 说明
flex-row flex-direction: row; 灵活的项目将水平显示,正如一个行一样。(从左到右排布)
flex-row-reverse flex-direction: row-reverse; 与 row 相同,但是以相反的顺序(从右到左排布)
flex-column flex-direction: column; 灵活的项目将垂直显示,正如一个列一样。(从上到下排列)
flex-column-reverse flex-direction: column-reverse; 与 column 相同,但是以相反的顺序。(从下到上排布)

# Flex Wrap

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
注意:如果元素不是弹性盒对象的元素,则属性不起作用。

class Properties 说明
flex-nowrap flex-wrap: nowrap; 规定灵活的项目不拆行或不拆列。(Flex成员项在一行排布)
flex-wrap flex-wrap: wrap; 规定灵活的项目在必要的时候拆行或拆列。(Flex成员项在多行排布)
flex-wrap-reverse flex-wrap: wrap-reverse; 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。(行为类似于wrap,排布方向与其相反。)

# Justify Content

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式

class Properties 说明
justify-start justify-content: flex-start; 所有的 flex 成员项都排列在容器的前部
justify-center justify-content: center; 中间对齐,成员项排列在容器中间、两边留白;
justify-end justify-content: flex-end; 成员项排列在容器的后部
justify-between justify-content: space-between; 两端对齐,空白均匀地填充到 flex 成员项之间
justify-around justify-content: space-around; 位于各行之前、之间、之后都留有空白的容器内

# Align Items

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

class Properties 说明
items-stretch align-items: stretch; 拉伸高度至 flex 容器的大小
items-start align-items: flex-start; 上对齐,所有的成员项排列在容器顶部
items-center align-items: center; 中间对齐,所有的成员项排列在容器底部
items-end align-items: flex-end; 下对齐,所有成员项都垂直地居中显示