在flex布局出现之前，我们使用的传统布局主要有以下几种：
- normal flow 文档流、正常流
- float + clear 清除浮动
- position relative + absolute 相对 + 绝对定位
- display inline-block 横向布局
- 负 margin 扩大宽度、产生位移
但是这些传统的布局方式无法实现垂直居中等。
flex也可称为“弹性布局”，flex布局有以下几个特点：
- 块级布局侧重垂直方向，行内布局侧重水平方向。flex布局与方向无关
- flex布局可以实现空间自动分配，自动对齐
- flex布局适用于简单的线性布局，复杂的布局则可以使用grid布局
接下来就将对flex布局的几个重要知识点进行归纳
该flex容器在纵横有两根轴，其中横向的称为主轴（main axis），纵向的称为侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size，在侧轴方向的高度叫做cross size。
详细参考flex布局
常见布局实例：
圣杯布局，如图所示
HTML代码：
<div class="demo">
<div class="header">头部</div>
<div class="body">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">底部</div>
</div>
CSS代码：
.demo{
display: flex;
flex-direction: column;
}
.demo div{
flex: 1;
}
.body{
display: flex;
}
.header,.footer,.left,.right{
flex: 0 0 20%!important;
}
固定百分比布局：
HTML代码：
<div class="demo">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
(1) 等分布局：
image
CSS代码：
.demo{
display: flex;
}
.item{
flex: 1;
}
（2）某一个固定
image
CSS代码：
.demo{
display: flex;
}
.item{
flex: 1;
}
.item2{
flex: 0 0 50%;
}
（3）某两个固定
image
CSS代码：
.demo{
display: flex;
}
.item{
flex: 1;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
}
（4）三个固定
image
CSS代码：
.demo{
display: flex;
}
.item{
flex: 1;
}
.item1{
flex: 0 0 10%;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
}
流式布局 ，如下如所示：
image
image
HTML代码如下：
<div class="demo">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS代码：
.demo{
width: 258px;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.item{
flex: 0 0 33.333333%;
height: 80px;
box-sizing: border-box;
}
青蛙游戏
初始状态
#pond {
display: flex;
flex-direction:column-reverse;
flex-wrap:wrap-reverse;
justify-content:center;
align-content:space-between;
}
布局完成
