页面布局一直都是web应用样式设计的重点
我们传统的布局方式都是基于盒模型的
利用display、position、float来布局有一定局限性
比如说实现自适应垂直居中
随着响应式布局的流行，CSS3引入了更加灵活的弹性布局模型。
使用弹性布局可以有效的分配一个容器的空间
即使我们的容器元素尺寸改变
它内部的元素也可以调整它的尺寸来适应空间。
若想让一个元素变成弹性盒
很简单：
.div { /*块级元素*/
display: flex;
}
.div { /*行级元素*/
display: inline-flex;
}
设置了flex布局后，子元素的float、clear和vertical-align属性就会失效
举个小例子
在html里边写几个盒子：
<div class="wrapper">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
然后在css里写出样式：
.wrapper {
width: 500px;
height: 100px;
border: 1px solid black;
}
.div1 {
width: 100px;
height: 100px;
font-size: 80px;
line-height: 100px;
text-align: center;
}
.div2 {
width: 100px;
height: 100px;
font-size: 80px;
line-height: 100px;
text-align: center;
}
.div3 {
width: 100px;
height: 100px;
font-size: 80px;
line-height: 100px;
text-align: center;
}
.div1 {
background-color: yellow;
}
.div2 {
background-color: skyblue;
}
.div3 {
background-color: pink;
}
现在的效果请看下图：
正常情况下，子元素div默认占满一行，所以他们只能纵向排列
现在我们使用弹性布局（给父盒子添加）
.wrapper {
width: 500px;
height: 100px;
border: 1px solid black;
display: flex；
}
那么现在就会变成这个样子：
我们发现子元素在父元素中呈现行排列
看起来好像子元素应用了浮动float
但这个属性远远没有这么简单
现在才刚刚开始(⊙▽⊙)
相关概念
在讲那些属性之前，我们先来看一些基本概念
设置了flex布局的元素，称为“flex容器”，简称“容器”
它的子元素，称为“flex项目”，简称“项目”
“容器”中有两条垂直的坐标轴
横向的叫做主轴
纵向的叫做交叉轴
主轴左边与右边分别叫做主轴起点与主轴终点
交叉轴上边与下边分别叫做交叉轴起点与交叉轴终点
“项目”也有两个名词
每个项目的宽与高叫做主轴尺寸与交叉轴尺寸
这回我们就能理解了为什么使用弹性布局后子元素呈现行排列
项目在容器中就是沿着主轴排列的
容器属性
弹性盒布局“容器”有如下属性
flex-flow：flex-direction，flex-wrap
justify-content
align-items
align-content
flex-direction
我们可以使用flex-direction指定主轴的方向，从而改变项目的排列方向
属性值：
row（默认）主轴水平方向，左端为起点
row-reverse 主轴水平方向，右端为起点
column 主轴垂直方向，上沿为起点
column-reverse 主轴垂直方向，下沿为起点
flex-wrap: wrap可以让我们指定当容器“装不下”项目时，是否换行
属性值如下：
no-wrap 不换行（默认）
wrap 换行
wrap-reverse 换行，第一行在下方
flex-flow
flex-flow是flex-direction和flex-wrap的复合属性
两个属性都是必写的
justify-content
justify-content属性定义了项目在主轴上的对齐方式
属性值如下：
flex-start：左对齐（默认）
flex-end：右对齐
center：居中
space-between：两端对齐（项目间间隔相同）
space-around：两端间隔对齐（项目间间隔是项目与边框间隔的2倍）
align-items
align-items属性定义项目在交叉轴上如何对齐
属性值如下：
stretch：未设置高度（或height: auto）的项目占满整个容器高度（默认）
flex-start ：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴中点对齐
baseline：项目第一行文字的基线对齐
align-content
align-content属性定义多根轴线的对齐方式
这个属性只有在容器有多条主轴是才有效，一条主轴无效
类似于justify-content属性
属性值如下：
stretch：轴线占满整个交叉轴（默认值）
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线间间隔相等
space-around：每根轴线两侧的间隔都相等
然后属性我就敲一个你们看一下怎么用，剩下的自己敲一下看一下具体效果：
在css父盒子继续写：
.wrapper {
width: 500px;
height: 100px;
border: 1px solid black;
display: flex;
justify-content: space-between;
}
变成什么样呢：
flex布局的属性就介绍这些，欢迎大家查遗补缺。
