这篇文章是我在阮一峰老师的flex布局教程下，按照自己的理解重写写一遍，以便增强理解。如果你来到这里最好去看一下阮一峰大神的Flex布局教程
正式开始自己的。
说起布局方式，大家首先要了解css3有哪些布局方式，这里就不一一详解了。网上一大堆，而且平时写css3的时候大家一般也都会用到。
Flex布局：
1.概念：flex布局，英文全称为：Flexible Box 也就是弹性盒子的意思。设置flex布局的元素叫做容器，其他的子元素叫做项目。恩，我之前还真不知道叫做项目，没注意过。在容器中存在着两根轴：主轴（水平）和交叉轴（垂直）。
然后我们先创建一个正常的li列表
<div>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>forth</li>
<li>fifith</li>
</ul>
</div>
在简单设置一下css样式，也不能太难看
div{
height: 500px;
width: 500px;
margin:0 auto;
background-color: #333;
}
ul{
padding: 20px;
box-sizing: border-box;
}
div li{
list-style: none;
display: block;
width: 200px;
height:50px;
text-align: center;
line-height: 50px;
font-size: 30px; margin：10px;
}
li:nth-child(n){
background-color: #007aff;
}
li:nth-child(2n){
background-color: #8a6de9;
color: #fff;
}
最终展现在我们眼前的效果就是
这个留着备用，我们继续开始下面的流程。
2.作用在容器上面的6大属性
flex-direction
align-items
justify-content
align-content
flex-wrap
flex-flow
2.1首先看第一个flex-direction属性
在之前我们设置好得li列表上面我们做一下改动，给div增加新的样式，为了方便容易看，我就直接在之前的样式后面 继续为 div 下ul元素添加样式。
div ul{
display: flex;
}
看一下效果
从原本的横向排列，变成了纵向排列。而且之前我们设置的 每个li 的宽度已经不起作用了。当我们设置display:flex;的时候，主轴默认的方向是水平方向也就是我们看到的样子。所以我们可以通过改变主轴的方向来随意调整我们li的排列方式。
/*设置主轴方向为垂直方向*/
flex-direction: column;
/*设置主轴方向为垂直方向，从下往上*/
flex-direction: column-reverse;
/*设置主轴方向为水平方向，从左往右*/
flex-direction: row;
/*设置主轴方向为水平方向，从右往左*/
flex-direction: row-reverse;
flex-direction: inherit;
flex-direction有五个属性，也可以说四个，毕竟最后一个可以省去。我们只要记着两个就行，column代表着垂直方向，row代表着水平方向。
2.2、这里我们看一下flex-wrap属性。
上面我们看到，设置成flex布局之后，li的宽度发生了变化，而且没有换行，挤在了一起。给样式加上flex-wrap之后，看一下
div ul{
display: flex;
flex-wrap: wrap;
}
flex-wrap，默认是nowrap。不换行。所以就导致了我们之前的那种情况，现在我们设置成wrap，让他根据宽度来决定是否换行。这样一来，就和float一样了。而且更加方便。flex-wrap还有一个属性
div ul{
display: flex;
flex-wrap: wrap-reverse;
}
也就是颠倒个个。
2.3flex-flow也就是flex-direction和flex-wrap的结合体，没什么好说的啦！
2.4justify-content
div ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
也就是设置垂直方向的排列方式，center就是居中。另外还有其他属性space-between;space-around;这两个属性可以说是我经常用到的属性。
2.4align-item这个就是水平方向的设置了。也justify-content相对应。也就不举栗子了。
2.5align-content属性定义的是多根线轴的对齐方式。具体样式也上面那两位几乎一样的。
3、在项目上的6大属性。
order
flex-grow
flex-shrink
flex-basis
align-self
3.1、order，设置数值，数值越小越靠前。例如我们给最后一个li添加order属性。设置为-1，样式为
li:last-child{
order: -1;
}
可以看到第五个fifth排到了第一位！！这就很方便了。也很实用，说实话，我刚刚发现这个属性的时候就想发现新大陆一样激动（鬼知道哥伦布怎么想的）
3.2、flex-grow属性。设置放大比例，默认值是0，例如我们给最后一个li增加属性
li:last-child{
flex-grow: 1;
}
3.3、flex-shrink就是缩小比例了。这个就不多说了。
3.4、flex-basis属性则定义了在分配多余空间之前，项目占据的主轴空间。
3.5、flex属性就是结合体.....我不是很熟练。还是一个个写吧
3.6、align-self也就是一个特立独行的存在。改变自己的排列方式。