008笔记

Flex容器的属性
提供了6个属性可以设置在flex容器上。
属性    描述
flex-direction    决定主轴的方向(即项目的排列方向)
flex-wrap    默认情况下，项目都排在一条线(又称"轴线")上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow    flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content    定义flex项目在主轴(x轴)上的对齐方式。
align-items    定义flex项目在交叉轴(y轴)上如何对齐。
align-content    定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
 

flex-direction

• flex-direction属性决定主轴的方向(即项目的排列方向)。

属性值	描述
row	按行正向排列
row-reverse	按行翻转排列
column	按列正向排列
column-reverse	按列翻转排列

flex-wrap属性
默认情况下，项目都排在一条线(又称"轴线")上。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
属性值    描述
nowrap    默认值，不换行，压缩flex项目的宽度，让所有保持一行。
wrap    换行，不压缩flex项目的宽度，第一行在上方。
wrap-reverse    换行，不压缩flex项目的宽度，第一行在下方。

justify-content属性
justify-content属性定义了flex项目在主轴(x轴)上的对齐方式。
属性值    描述
flex-start    在主轴(x轴)上以起点对齐(左对齐)
flex-end    在主轴(x轴)上以终点对齐(右对齐)
center    在主轴(x轴)上以中点对齐(居中对齐)
space-between    在主轴(x轴)上以两边对齐(两边对齐)，平均分割元素之间的空隙，不保留最左与最右的空隙
space-around    在主轴(x轴)上以两边对齐(两边对齐)，平均分割元素之间的空隙，保留最左与最右的空隙

align-items属性

• align-items属性定义flex项目在交叉轴(y轴)上如何垂直对齐。

属性值	描述
flex-start	居上对齐
flex-end	居下对齐
center	垂直居中对齐
baseline	基于文本底线对齐
stretch	基于flex容器的上下边拉伸对齐

align-content属性
align-content属性定义了多根轴线的对齐方式。
如果项目只有一根轴线，该属性不起作用。
属性值    描述
flex-start    多行居上排列
flex-end    多行居下排列
center    多行居中排列
space-between    多行平均行间空隙排列，不保留首行上方与末行下方空隙
space-around    多行平均行间空隙排列，保留首行上方与末行下方空隙