Flex弹性盒模型？

Flex弹性盒模型？

Flex布局：可以简便、完整、响应式的实现各种网页布局。（适合移动端开发）

如让元素垂直居中。

作用在flex容器上（即在父容器上设置）	作用在flex子项上
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-items	flex
align-content	align-self

display：flex；只需要在父容器中设置即可，不必在子容器中设置

 

flex-direction：（在父容器上设置，）

用来控制整个子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

取值	含义
row	默认值，显示为行，方向为当前文档水平流方向，默认情况下是从左往右
row-reverse	显示为行，但方向和row属性值是反的
column	显示为列
column-reverse	显示为列，但方向和column属性值是反的

注：会自动调整各子项的宽度/高度，若小于最小宽度/高度则会溢出（针对默认值）

 

flex-wrap：

用来控制子项整体单行显示还是换行显示。

取值	含义
nowrap	默认值，表示单行显示，自动调节大小，不换行，小于最小宽度则溢出
wrap	宽度不足换行显示
wrap-reverse	宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面

注：保留各子项的宽高，当父容器剩余宽不足以容纳下一个子项式，则采取换行，换行后的各行是平均式间距（针对默认值）

 

 

flex-flow:

该属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开

 

justify-content：（整个子项的对齐或分布方式）

该属性决定了主轴方向上子项的对齐和分布方式。（即行还是列方向的整个子元素的对齐方式）

取值	含义
flex-start	默认值，表现为起始位置对齐（即整体左对齐）
flex-end	表现为结束位置对齐（即整体右对齐）
center	表现为居中对齐（即整体中间水平居中，注意不是垂直居中）
space-between	表现为两端对齐。between是中间的意思，意思是两端各分配一个子元素后，中间多余的空白区域由剩下子元素平均分配。注: 当存在自由调节的宽度时空白区域不生效，各子项会紧靠在一起，以显示在一行或一列上
space-around	around是环绕的意思，意思是每个flex子项左右两侧都存在等宽的空白间距，两两flex子项的空白间距则会叠加，最终视觉上边缘两侧的空白只有中间空白宽度的一半
space-evenly	evenly是匀称、平等的意思，也就是视觉上，每个flex子项左右两侧空白间距完全相等，没有叠加效果。

 

align-items: （一行当中每个子项的排列。上中下）

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式

取值	含义
stretch	默认值，flex子项拉伸（即若不设置高度，则高度为父容器的100%，若换行，则高度为父容器的50%）
flex-start	表现为容器顶部对齐
flex-end	表现为容器底部对齐
center	表现为垂直居中对齐

 

align-centent：（多行的对齐方式）

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的

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

 

作用在flex子项上的css属性

取值	含义
order	可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0。指在所有子项中的排序位置
flex-grow	属性中的grow是扩展的意思，即扩展的就是flex子项所要占据剩余空白间隙宽度。空白间隙整体为1。默认值为0。设置为0.5则占据空白间隙的一半。可多个flex子项设置
flex-shrink	属性中的shrink是‘收缩’的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1正常因空间不足被平均收缩状态。若不希望该子项因空间不足而出现收缩的状态，则要设置为0.值越大收缩的越厉害。
flex-basis	定义了在分配剩余空间之前元素的默认大小（前提是不存在空间不足，优先级高于width的设置）
flex	flex属性是flex-grow，flex-shrink和flex-basis的缩写。
align-self	align-self指控制单独某一个flex子项的垂直对齐方式

flex-direction：子项整体布局方向，row或column

flex-wrap：子项整体空间不足时是否换行

justify-content：整个子项的对齐或分布方式，主轴方向的start对齐、end对齐、center对齐，between两端对齐，around环绕对齐，evenly对齐

align-items: 一行当中每个子项的排序，上中下

align-centent：多行的对齐方式，各行左对齐，右对齐，两边对齐

 

order：改变子项的位置

flex-grow：有空白间隙时，扩展or改变子项相对间隙的占位大小

flex-shrink：空间不足时，改变收缩状态

align-self：控制单独子项的垂直对齐方式