flex弹性盒子(伸缩盒模型)的使用

伸缩盒布局

1 伸缩容器和伸缩项目

伸缩容器： 一个元素设置 CSS 属性 display:flex 或者 display: inline-flex，该元素就变为伸缩容器。

伸缩项目： 伸缩容器的子元素就会变为伸缩项目。

伸缩项目会水平排列，可以完美的设置宽高以及内外边距，不存在外边距塌陷合并，并且具有伸缩性。

只有伸缩容器的子元素才是伸缩项目，子元素的子元素以及其他后代不是。

伸缩项目也可以作为它的子元素的伸缩容器。

2 设置主轴方向和换行方式

主轴： 伸缩项目会沿着主轴排列，主轴的默认是水平的且方向是从左到右。

侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的且从上到下。

① 设置主轴方向

flex-direction 属性可以设置主轴方向：

值：
row             默认值，水平且从左到右
row-reverse     水平从右到左
column          垂直从上到下
column-reverse  垂直从下到上

② 设置换行方式

flex-wrap 属性可以设置伸缩项目的换行方式：

值：
nowrap          默认值，强制不换行
wrap            自动换行
wrap-reverse    换行且反转行的排列属性

③ 同时设置主轴方向和换行方式

flex-flow 属性可以同时设置主轴方向和换行方式，该属性是 flex-direction 和 flex-wrap 的复合属性，值没有数量和顺序要求。

3 设置伸缩项目在主轴上的对齐方式

justify-content 属性可以设置伸缩项目在主轴上的对齐方式：

值：
flex-start          默认值，靠主轴起始位置对齐
flex-end            靠主轴结束位置对齐
center              居中对齐
space-between       伸缩项目在主轴上均匀分布，两端没有间隙，中间有间隙。
space-around        伸缩项目在主轴上均匀分布，两端的间隙是直接间隙的一半。
space-evenly        伸缩项目在主轴上均匀分布，两端的间隙与中间的间隙一样。

4设置伸缩项目在侧轴上的对齐方式

① 一条主轴线（伸缩项目在主轴上不换行）

align-items 属性可以设置伸缩项目在侧轴上的对齐方式，主要用于只有一条主轴线的情况。

值：
stretch         默认值，伸缩项目在侧轴上拉伸。
flex-start      靠侧轴开始位置对齐
flex-end        靠侧轴结束位置对齐
center          居中对齐
baseline        文字基线对齐

② 多条主轴线（伸缩项目在主轴上发生换行）

align-content 属性可以设置伸缩项目在侧轴上的对齐方式，只能用于多条主轴的情况（伸缩项目发生了换行）

值：
stretch         默认值，伸缩项目在侧轴上拉伸。
flex-start      靠侧轴开始位置对齐
flex-end        靠侧轴结束位置对齐
center          居中对齐
space-between   在侧轴方向上，两端没有间隙，中间有间隙。
space-around    在侧轴方向上，两端的空隙是中间空隙的一半。
space-enenly    在侧轴方向上，两端的空隙与中间空隙一样。

注意：

align-items 在一条主轴或多条主轴设置对齐方式都会生效，但是我们只有在一条主轴的情况下使用该属性。

align-content 只有多条主轴线的情况下才生效。

5 伸缩项目的伸缩性

① 伸缩项目在主轴上的基准长度 flex-basis

需要设置一个长度作为值，概属性设置的是伸缩项目在主轴方向上的长度。如果没有设置该属性，伸缩项目在主轴上的长度就是 width的值或者 height的值。

② 扩展比率 flex-grow

伸缩项目发生扩展的前提：伸缩容器在主轴方向上有富余的空间。

伸缩项目默认的扩展比率是 0。

伸缩项目在扩展的时候，按照各自的扩展比率瓜分伸缩容器的富余空间。

③ 收缩比率 flex-shrink

伸缩项目发生收缩的前提：伸缩容器在主轴方向上的长度不够（小于伸缩项目在主轴上的长度的和）

伸缩项目默认的收缩比率是 1。

伸缩项目在收缩的时候，每个伸缩项目要补一部分伸缩容器的亏空，补多少既考虑自己原本的长度也考虑收缩比率。

④ flex 复合属性

flex: grow shrink basis;

复合数的简写：

flex: 1;      /* flex: 1 1 0 */
flex: auto;  /* flex: 1 1 auto */
flex: none;  /* flex: 0 0 auto*/
flex: 0 auto;  /* flex: 0 1 auto */

6 伸缩项目排序

给伸缩项目设置属性 order 可以调整伸缩项目排列属性。 order 属性的值是数字，值越小排序越靠前，可以是负数。

7 单独设置伸缩项目在侧轴上的对齐方式

给伸缩项目设置属性 align-self，可以单独设置该伸缩项目在侧轴上的对齐方式，属性的值与 align-items 一样。

8 伸缩盒相关 CSS 属性总结

① 设置给伸缩容器的属性

CSS 属性名	含义	值
display	设置显示模式	flex: 设置为伸缩容器 inline-flex：设置为行内的伸缩容器
flex-direction	设置主轴方向	row：默认值，水平从左到右 row-reverse：水平从右到左 column：垂直从上到下 column-reverse：垂直从下到上
flex-wrap	设置换行方式	nowrap：默认值，不换行 wrap：自动换行 wrap-reverse：自动换行且反转排列
flex-flow	复合属性复合主轴方向和换行方式
justify-content	伸缩项目在主轴上的对齐方式	flex-start：靠主轴起始位置 flex-end：靠主轴结束位置 center：居中 space-between：两端没有间隙，中间有间隙 space-around：两端的间隙是中间间隙的一半 space-evenly：两端间隙与中间间隙一样
align-items	伸缩项目在侧轴上的对齐方式一条主轴线	stretch：默认值，拉伸 flex-start：靠侧轴其实位置 flex-end：靠侧轴结束位置 center：居中 baseline：文字基线对齐.
align-content	伸缩项目在侧轴上的对齐方式多条主轴线	stretch：默认值，拉伸 flex-start：靠侧轴其实位置 flex-end：靠侧轴结束位置 center：居中 space-between：两端没有间隙，中间有间隙 space-around：两端的间隙是中间间隙的一半 space-evenly：两端间隙与中间间隙一样

② 设置给伸缩项目的属性

CSS 属性名	含义	值
flex-basis	设置伸缩项目在主轴上的长度	长度默认值是 auto
flex-grow	设置扩展比率	数字，默认是 0.
flex-shrink	设置收缩比例	数字，默认是 1
flex	复合属性，复合 basis、grow、shrink
order	设置伸缩项目排序顺序	数字
align-self	单独设置伸缩项目在侧轴上对齐方式	auto：默认值 stretch：拉伸 flex-start：靠侧轴其实位置 flex-end：靠侧轴结束位置 center：居中 baseline：文字基线对齐.