Flex布局概念：
- flex布局也叫弹性布局
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
- flex布局非常适合结构化布局
设置方式：给父元素添加display：flex，子元素可以自动的挤压或拉伸
任何一个容器都可以指定为flex布局，行内元素也可以使用flex布局
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
组成部分：
- 弹性容器（父容器）
默认的宽度为父元素的宽度，默认的高度由内容所撑开。
- 弹性盒子（子元素）
- 弹性盒子就没有显示模式的区别，统统叫做弹性盒子。 没有块级,行内,行内块元素之分(可以一行显示多个)。
- 默认宽度由内容所撑开，默认高度和父元素一样高(侧轴方向会拉伸)。
- 默认弹性盒子是不会换行的，宁愿牺牲自己的宽度，哪怕溢出父元素都不会自动换行。
- 主轴
- 交叉轴、侧轴
弹性容器（父容器）使用的属性
flex-direction：设置主轴和交叉轴的方向
- row（默认）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column：主轴为垂直方向，起点在下沿。
flex-wrap：设置子元素超出父容器时是否换行
- nowrap（默认）：不换行，flex子项可能会溢出容器。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方，从左到右排列。
flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content：设置子元素在主轴（横向）方向上的对齐方式
- flex-start：左对齐。
- flex-end：右对齐。
- center：元素从中间位置对齐。
- space-between：两边对齐（左右两边），从中间开始向两边伸缩对齐。
- space-around：围绕间隙展开（左右间隙），使元素之间的边距相等展开。
- space-evenly：弹性盒子离弹性盒子之间的距离相等（空白空间均分）
align-items：设置元素在纵轴方向上的对齐方式。
- flex-start（默认）：元素行在上面对齐。
- flex-end：元素行在下面对齐。
- center：元素行在中间对齐。（主要还是针对单行进行居中对齐）。
- baseline：盒子的第一行文字的基线对齐。
- stretch：如果元素未设置高度或设为auto，将占满整个容器的高度。
align-content：设置弹性堆叠伸缩的对齐方式
- flex-start：元素从行起始位置堆叠(默认)。
- flex-end：元素从行结束位置堆叠。
- center：元素从中间位置堆叠。（主要多行内容集中居中）。
- space-bettween：两边对齐（上下两边），从中间开始向两边伸缩对齐。
- space-around：围绕间隙展开（上下间隙），使元素之间的边距相等展开。
- stretch：默认值，伸展占用剩余的空间。
弹性盒子（子元素）
order：定义元素的排列顺序
- number：数值越小，排列越靠前，默认为0。
flex-grow：设置弹性盒子的放大比例。
- number：默认为0，即如果存在剩余空间，也不放大。
- 比例计算方式：200px * 1 + 200px * 1 + 400px * 3 = 1600px
- (200px1)/1600、(400px3)/1600
- 注意：加权值乘的时候是该元素的内容区宽度乘以比例
浅释：如果所有元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink：设置缩小比例
- number：默认为1，即如果空间不足，该项目将缩小。
- 加权值计算：（真实内容区的大小）* shrink + 。。。加权值
flex-basis：按比例伸缩空间
- auto（默认值）：无特定宽度值。
- length：用长度来定义宽度。
- 百分比：用百分比来定义宽度。
- content：基于内容自动计算。
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
- 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
- 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
浅释:
- 所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配
- 其他的盒子宽度固定，只有一个盒子设置了flex:1，则该盒子占据父元素剩余的宽度
align-self：子项作为一个个体基于交叉轴的一个分配状况
- flex-start：从开始位置开始排列
- flex-end：从最后的位置开始排列
- center：基于交叉轴中心对齐
- baseline：
- stretch：自动撑开高度，前提没设置高度。
flex布局应用
1. flex居中
display: flex;
justify-content: center;
align-items: center;
2. 可动态增加的导航栏
.wrap3 {
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;
}
.item {
flex: 1 1 auto;
height: 30px;
line-height: 30px;
text-align: center;
color: #f20;
border-radius: 5px;
cursor: pointer;
}
3. 等分布局（4等分，2等分，中间可加margin）
diplay: flex;
flex: 1 1 auto;
margin: 0 2px;
4. 中间固定，两边自适应
.wrap4 {
width: 400px;
height: 200px;
border: 1px solid black;
display: flex;
}
.content4 {
flex: 1 1 auto;
height: 100px;
border: 1px solid green;
box-sizing: border-box;
}
.content4:nth-of-type(2) {
flex: 0 0 200px;
}
5. 流式布局(类似float作用)
display: flex;
flex-wrap: wrap;
align-content: flex-start;
6. 圣杯布局
<div class="wrapper">
<div class="header"></div>
<div class="contian">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
.wrapper {
resize: both;
overflow: hidden;
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header, .footer, .left, .right{
flex: 0 0 20%;
border: 1px solid green;
box-sizing: border-box;
}
.contian, .center {
flex: 1 1 auto;
display: flex;
}
