弹性布局（flex布局、伸缩布局）
一、什么是弹性布局
flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局
注：当我们为父盒子设置弹性布局后，子元素的
float、clear和vertical-align属性将失效
.box{
display: flex;
}
.box{
display: inline-flex;
}
/*Webkit 内核的浏览器，必须加上-webkit前缀。*/
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
二、布局原理
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: green;
justify-content: space-around;
align-items: center;
}
div span{
height: 150px;
background-color: greenyellow;
margin-right: 5px;
flex: 1;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
flex布局的原理：通过给父盒子添加flex属性，来控制盒子的位置和排列方式
三、父容器常见属性
1. flex-direction 设置主轴方向（即项目的排列方向）
在flex布局中，是分为主轴和交叉轴两个方向
- 默认主轴方向就是x轴方向，水平向右
- 默认交叉轴方向就是y轴方向，水平向下
主轴方向是可以通过flex-direction设置的，交叉轴是会跟随主轴排列的。
| 属性值 | 说明 |
|---|---|
| row（默认值） | 主轴为水平方向，起点在左端（从左到右） |
| row-reverse | 主轴为水平方向，起点在右端（从右到左） |
| column | 主轴为垂直方向，起点在上沿（从上到下） |
| column-reverse | 主轴为垂直方向，起点在下沿（从下到上） |
2. justify-content 设置项目在主轴上的排列方式
| 属性值 | 说明 |
|---|---|
| flex-start（默认值） | 从头部开始（如果x是主轴，则从左到右） |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是x，则水平居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边 再平分剩余空间（最常用） |
图示：为了看得更方便加了边框
3. flex-wrap 设置项目是否换行
默认情况下，项目都排在一条轴线上，flew-wrap属性定义，flex布局中默认是不换行的，如果装不下会缩小子元素的宽度
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
| wrap-reverse | 换行，第一行在下方 |
4. align-items 设置交叉轴上的子元素排列方式
假设交叉轴从上到下；在子项为单行的时候使用
| 属性值 | 说明 |
|---|---|
| flex-start（默认值） | 交叉轴的起点对齐（从上到下） |
| flex-end | 交叉轴的终点对齐（从下到上） |
| center | 交叉轴的中点对齐（挤在一起居中） |
| stretch | 如果项目未设置高度或设为auto，将占满整个容器的高度（拉伸） |
| baseline | 项目的第一行文字的基线对齐 |
5. align-content 设置交叉轴上的子元素排列方式（多行）
设置子项在交叉轴排列方式并且只能用于多行子项（单个项有宽度，一行放不下时，换行：flex-wrap:wrap;），单行子项下是没有效果的
| 属性值 | 说明 |
|---|---|
| flex-start（默认值） | 在交叉轴的头部开始排列 |
| flex-end | 在交叉轴的尾部开始排列 |
| center | 在交叉轴中间显示 |
| space-around | 子项在交叉轴平分剩余空间 |
| space-between | 子项在交叉轴先分部在两头，在平分剩余空间 |
| stretch | 设置子项元素高度平分元素高度 |
align-items和align-content区别
- align-items适用于单行的情况下
- align-content适用于多行（子项有宽度一行放不下换行时）的情况（单行是无效的）
6. flex-flow 复合属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: row wrap;
}
总结
- flex-direction：设置主轴方向
- justify-content：设置主轴上的子元素排列方式
- flex-warp：设置子元素是否换行
- align-items：设置交叉轴上的子元素的排列方式（单行）
- align-content：设置交叉轴上的子元素的排列方式（多行）
- flex-flow：复合属性，flex-direction属性和flex-wrap属性的简写形式
四、子项常见属性
1. flex属性
flex属性定义子项分配剩余的空间，用flex来表示占多少份数
2. align-self属性
控制子项这在侧轴上的排列方式，允许单个项目与其他的项目有不一样的对齐方式。可覆盖align-items属性。
默认值是auto，表示基础父元素的align-items属性，如果没有父元素，则等同于stretch。
3. order属性
数值越小，排列越靠前，默认为0（通过css oder属性调整盒子的位置）
4. flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
5. flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
6. flex-basis
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。