Flex弹性盒模型的精华

Flex布局

1.作用在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-direction的方向)方向上子项的对齐和分布方式。可取的值有:

flex-start:默认值,表现为起始位置对齐。

flex-end:表现为结束位置对齐。

center:表现为居中对齐。

space-between:表现为两端对齐,between是中间的意思,意思是多余的空白间距只在元素中间区域分配。

space-around:around是环绕的意思,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。

space-evenly:evenly是匀称,平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。

(5)align-items:items指的就是flex的子项们,因此 align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。可取的值有:

stretch:默认值,flex子项拉伸。

flex-start:表现为容器顶部对齐。

flex-end:表现为容器底部对齐。

center:表现为垂直居中对齐。

(6)align-content:可以看成和justify-content相似且对立的属性,如果所有flex子项只有一个行,则align-content是没有任何效果的,针对多行子项之间。可取的值有:

stretch:默认值,每一行flex子元素都等比例拉伸,例如:如果一共有两行flex子元素,则每一行拉伸的高度是50%。

flex-start:默认值,表现为起始位置对齐。

flex-end:表现为结束位置对齐。

center:表现为垂直居中对齐。

flex-start:默认值,表现为起始位置对齐。

flex-end:表现为结束位置对齐。

center:表现为居中对齐。

space-between:表现为两端对齐。

space-around:每一行元素上下都享有独立不重叠的空白空间。

space-evenly:每一行元素都完全上下等分。

2.作用在Flex子项上

order:排序,可以通过设置order改变某一个flex子项的排序位置。所有的flex子项的默认order的属性值是0,值越大越靠后。

flex-grow:属性中的grow是扩展的意思,扩展的就是flex子项所占据的宽度,扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0。

flex-shrink:属性中的shrink是“收缩”的意思,flex-shrink主要处理当flex容器空间不足的时候,单个元素的收缩比例。默认值是1。

flex-basis:定义了在分配剩余空间之前元素默认大小(未收缩之前有效,相当于给元素设置一个固定宽度值,其优先级比width高)。

flex:该属性是flex-grow、flex-shrink、flex-basis的缩写。

align-self:指控制单独某一个flex子项的垂直对齐方式。

你可能感兴趣的:(Flex弹性盒模型的精华)