弹性盒子——flex布局

#开启flex布局的方法：

1.在CSS中添加属性：display：flex

2.在CSS中添加属性：display：inline-flex

二者的区别：inline-flex在开启flex布局的同时也能够转换元素的显示模式。如：将div标签从块级元素转换成行内块元素

注意：
1.在父元素中开启的flex布局，只对其子代生效，无法对其他后代生效

2.只要元素成为了伸缩项目，就会变成块级元素

3.开启flex布局后，伸缩容器中的子元素会自动成为伸缩项目

#主轴方向
主轴：位于水平方向，从左到右
侧轴：位于垂直方向，从上到下

调整主轴方向的属性值：

flex-direction: row-reverse(水平从右到左）
flex-direction: column(垂直从上到下）
flex-direction: column-reverse(垂直从下到上）

#主轴换行方式
属性名：flex-wrap：wrap

反向换行： 属性值：flex-wrap：wrap-reverse

默认值：flex-wrap：nowrap（不换行）

flex-flow
flex-flow可以同时指定主轴的方向和换行方式，值的顺序没有要求
例如：flex-flow：row wrap

#主轴对齐方式

属性名：justify-contentt: ；

justify-content: flex-start(默认值）

justify-content：flex-end(主轴的结束位置）

justify-content：center（中间对齐）

justify-content：space-around（项目均匀的分布在一行中，项目与项目之间的距离，是项目距边缘的二倍）

justify-content：space-between（项目均匀的分布在一行中，项目与项目之间的距离是相等的，项目距边缘没有距离）

justify-content：space-evenly（项目均匀的分布在一行中，离哪里的距离都相等）

#侧轴对齐方式
一. 仅适用于只有一行的情况
属性名：
1.align-items：flex-start（侧轴的起始位置对齐）

2.align-items：flex-end（侧轴的结束位置对齐）

3.align-items：center（侧轴的中间位置对齐）

4.align-items：baseline（伸缩项目的第一行文字的基线对齐）

5.align-items：stretch（默认值，如果项目没有高度，则充满整个父容器）

二.适用于有多行的情况
属性名：
1.align-content：flex-start（侧轴的起始位置对齐）

2.align-content：flex-end（侧轴的结束位置对齐）

3.align-content：center（侧轴的中间位置对齐）

4.align-content：space-around（伸缩项目之间的距离是相等的，且是边缘的二倍）

5.align-content：space-between（伸缩项目之间的距离是相等的，且边缘无距离）

6.align-content：space-evenly（伸缩项目之间的距离是相等的，且与和边缘的距离相同）

7.align-content：stretch（默认值，伸缩项目必须没有高度，和单行一样）

#借助伸缩盒模型实现元素的水平垂直居中
方法一：开启flex布局后，对伸缩项目使用主轴与侧轴的居中对齐来实现

方法二：给父元素开启flex布局后，直接给子元素添加属性：margin：auto

#伸缩项目在主轴上的基准长度【不常用】
基准长度（默认值为auto）
属性名：flex-basis：；（单位：px）【此属性可以覆盖原有设置的伸缩项目在主轴方向上的长度】

伸缩盒模型的伸缩性
&伸：
属性名： flex-grow：数字（这个数字是控制比例的）
规则：
1.如果所有伸缩项目的flex-grow的值都为1，则它们将等分剩余空间

2.如果三个伸缩项目的flex-grow的值分别为1，2，3，则它们按比例分剩余的空间

&缩：
属性名：flex-shrink： 数字；
计算规则：盒子的收缩是由比例值乘收缩的像素值。
比例值的计算：分母为每个盒子的宽乘上各自的收缩的比例数字再相加，分子为各个盒子的宽乘上比例数字

#flex复合属性
含义：可以把伸缩和基准长度复合在一起
属性名：flex：；
书写顺序：先写grow，再写shrink，最后写basis
例：

1. flex：1 1 auto（可伸缩，不设置基准长度）
   简写方式：flex:auto

2. flex：1 1 0（可伸缩，设置基准长度为0）
   简写方式：flex:1

3. flex：0 0 auto（不可伸缩，不设置基准长度）
   简写方式：flex:none

4. flex：0 1 auto（不能拉伸，可以压缩，不设置基准长度）
   简写方式：flex:0 auto

#排序与单独对齐
1.项目排序
属性名：order：数字；
项目的数字默认为0，order中的数字比0小，数字越 小，项目越靠前

2.单独对齐

属性名：align-self： ；