我们传统的布局方式是基于在盒子模型下的，依赖于display属性的，position属性的或者是float属性的，但是在传统的布局上面并不好布局; 比如我们想让某个元素垂直居中的话，我们常见的会让其元素表现为表格形式，比如display:table-cell属性什么的，我们现在来学习下使用flex布局是非常方便的;
目前的浏览器支持程度： IE10+，chrome21+，opera12.1+，Firefox22+，safari6.1+等;
如上浏览器的支持程度，我们可以把此元素使用在移动端很方便;
flex是什么呢？Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
flex的弹性布局有如下优势：
1.独立的高度控制与对齐。
2.独立的元素顺序。
3.指定元素之间的关系。
4.灵活的尺寸与对齐方式。
一：基本概念：
采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为flex项目。如下图：
容器默认存在2根轴，水平的主轴和垂直的侧轴，主轴的开始位置(与边框的交叉点)叫做main start, 结束位置叫做 main end.
交叉轴的开始位置叫做 cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，
占据的交叉轴空间叫做cross size。
二：容器有如下6个属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1. flex-direction：该属性决定主轴的方向(即项目的排列方向)。
它可能有四个值：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
<div class="first-face container">
<span class="pip"></span>
</div>
<style>
html, body {
height: 100%;
}
.container {
width:150px;
height:150px;
border:1px solid red;
}
.first-face {
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction:row;
display: -webkit-box;
-webkit-box-pack:start;
}
.pip {
display:block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #333;
}
</style>
注意：在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。不支持该属性，因此使用display: flex;的时候需要加上display: -webkit-box; 还有一些水平对齐或者垂直对齐都需要加上对应的box-pack(box-pack表示父容器里面子容器的水平对齐方式)及box-align(box-align 表示容器里面子容器的垂直对齐方式）.具体的可以看如下介绍的 display:box属性那一节。
我们可以看下截图如下：
2. flex-wrap属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，可以换行。
它有如下三个值：
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
3. flex-flow
该属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4. justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。下面假设主轴为从左到右。
值为如下：
flex-start | flex-end | center | space-between | space-around;
flex-start(默认值) 左对齐
flex-end 右对齐
center 居中
space-between： 两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。
5. align-items属性
align-items属性定义项目在交叉轴上如何对齐。
它可能取5个值：
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
该属性可能取6个值。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
三：项目的属性，以下有6个属性可以设置在项目中，
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1. order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
基本语法：
.xx {order: <integer>;}
2. flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
基本语法：
.xx {
flex-grow: <number>;
}
3. flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
基本语法：
.xx {
flex-shrink: <number>;
}
4. flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
基本语法：
.xx { flex-basis: <length> | auto;}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
5. flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6. align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
基本语法：
.xx {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
实例
一： 1丙
HTML代码：
<div class="first-face container">
<span class="pip"></span>
</div>
上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。
css代码结构如下：
<style>
html, body {
height: 100%;
}
.container {
width:150px;
height:150px;
border:1px solid red;
}
.first-face {
}
.pip {
display:block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #333;
}
</style>
1. 首先，只有一个左上角的情况下，flex布局默认为左对齐，因此需要display:flex即可;如下代码：
.first-face {
display: flex;
display: -webkit-box;
}
上面为了兼容UC浏览器和IOS浏览器下，因此需要加上display: -webkit-box;来兼容，我们也明白，如果不加上.first-face里面的代码，也能做出效果，因为元素默认都是向左对齐的，如下图所示：
我们继续来看看对元素进行居中对齐; 需要加上 justify-content: center;即可;但是在UC浏览器下不支持该属性，
我们水平对齐需要加上box-pack，box-pack表示父容器里面子容器的水平对齐方式，具体的值如上面介绍的box的语法，
需要加上 -webkit-box-pack:center; 因此在first-face里面的css代码变为如下代码：
.first-face {
display: flex;
display: -webkit-box;
justify-content:center;
-webkit-box-pack:center;
}
效果如下：
上面已经介绍过
justify-content属性定义了项目在主轴上的对齐方式(水平方向上)，有五个值，这里不再介绍，具体可以看上面的基本语法。
水平右对齐代码也一样、因此代码变成如下：
.first-face {
display: flex;
display: -webkit-box;
justify-content:flex-end;
-webkit-box-pack:end;
}
如下图所示：
2. 我们接着来分别看看垂直居左对齐，垂直居中对齐，垂直居右对齐.
一：垂直居左对齐
我们现在需要使用上align-items属性了，该属性定义项目在交叉轴上如何对齐。具体的语法如上：
同样为了兼容UC浏览器或其他不支持的浏览器，我们需要加上box-align 该属性表示容器里面字容器的垂直对齐方式;具体的语法如上;
因此代码变成如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:center;
-webkit-box-align:center;
}
效果如下：
二：垂直居中对齐
现在垂直已经居中对齐了，但是在水平上还未居中对齐，因此在水平上居中对齐，我们需要加上justify-content属性居中即可;
同样为了兼容UC浏览器，需要加上 -webkit-box-pack:center;
代码变为如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:center;
-webkit-box-align:center;
justify-content:center;
-webkit-box-pack:center;
}
效果如下：
三：垂直居右对齐
原理和上面的垂直居中对齐是一个道理，只是值换了下而已;代码如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:center;
-webkit-box-align:center;
justify-content:flex-end;
-webkit-box-pack:end;
}
效果如下：
3. 我们接着来分别看看底部居左对齐，底部居中对齐，底部居右对齐.
一：底部居左对齐
其实属性还是用到上面的，只是值换了一下而已;代码如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:flex-end;
-webkit-box-align:end;
justify-content:flex-start;
-webkit-box-pack:start;
}
效果如下：
二：底部居中对齐
代码变为如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:flex-end;
-webkit-box-align:end;
justify-content:center;
-webkit-box-pack:center;
}
效果如下：
三：底部居右对齐
代码变为如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:flex-end;
-webkit-box-align:end;
justify-content:flex-end;
-webkit-box-pack:end;
}
效果如下：
二：2丙
1. 水平上2端对齐; 需要使用的属性justify-content: space-between;该属性能使第一个元素在左边，最后一个元素在右边。
因此代码变成如下：
.first-face {
display: flex;
justify-content: space-between;
}
但是在UC浏览器下不生效，因此我们需要 display: -webkit-box;和-webkit-box-pack:Justify;这两句代码;
display: -webkit-box;我不多介绍，上面已经讲了，-webkit-box-pack:Justify;的含义是在box-pack表示水平等分父容器宽度。
因此为了兼容UC浏览器，所以代码变成如下：
.first-face {
display: flex;
justify-content: space-between;
display: -webkit-box;
-webkit-box-pack:Justify;
}
效果如下：
2. 垂直两端对齐;
垂直对齐需要使用到的flex-direction属性，该属性有一个值为column：主轴为垂直方向，起点在上沿。
代码变为如下：
.first-face {
display: flex;
justify-content: space-between;
flex-direction: column;
}
再加上justify-content: space-between;说明两端对齐.但是在UC浏览器并不支持该属性，使其不能垂直两端对齐，因此为了兼容UC浏览器，需要使用-webkit-box;因此
整个代码变成如下：
.first-face {
display: flex;
justify-content: space-between;
-webkit-flex-direction: column;
flex-direction: column;
display: -webkit-box;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-box-pack:justify;
}
如上使用 -webkit-box-direction: normal; 使其对齐方向为水平从左端开始，-webkit-box-orient: vertical;使用这句代码告诉
浏览器是垂直的,-webkit-box-pack:justify;这句代码告诉浏览器垂直的两端对齐。
如下图所示：
3. 垂直居中两端对齐
代码如下：
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
多加一句 align-items: center;代码; 表示交叉轴上居中对齐。同理在UC浏览器下不支持的，因此我们为了兼容UC浏览器，可以加上如下代码，因此整个代码如下：
.first-face {
display: flex;
justify-content: space-between;
-webkit-flex-direction: column;
flex-direction: column;
align-items:center;
display: -webkit-box;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-box-pack:justify;
-webkit-box-align:center;
}
再加上-webkit-box-align:center;这句代码，告诉浏览器垂直居中。
如下图所示：
4. 垂直居右两端对齐
代码如下：
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
同理为了兼容UC浏览器，整个代码变成如下：
.first-face {
display: flex;
justify-content: space-between;
-webkit-flex-direction: column;
flex-direction: column;
align-items:flex-end;
display: -webkit-box;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-box-pack:justify;
-webkit-box-align:end;
}
和上面代码一样，只是更改了一下垂直对齐方式而已;
如下图所示：
注意：下面由于时间的关系，先不考虑UC浏览器的兼容
三：3丙
代码如下：
HTML代码：
<div class="first-face container">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
CSS代码如下：
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pip:nth-child(2) {
align-self: center;
}
.pip:nth-child(3) {
align-self: flex-end;
}
如下图所示：
四： 4丙
代码如下：
HTML代码：
<div class="first-face container">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
CSS代码如下：
.column{
display: flex;
justify-content: space-between;
}
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
}
如下图所示：
五：5丙
HTML结构如下：
<div class="first-face container">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
css代码如下：
.column{
display: flex;
justify-content: space-between;
}
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.first-face .column:nth-of-type(2){
justify-content: center;
}
如下图所示：
六：6丙
HTML结构如下：
<div class="first-face container">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
css代码如下：
.column{
display: flex;
justify-content: space-between;
}
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
}
如下图所示：
