一、什么是flex布局
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。简单来说，flex布局就是一种新的盒装布局方式。
二、基本概念
采用了flex布局的容器就是flex中的”容器“，而它的子代元素默认就是flex中的项目。在flex布局中有两个重要的概念：主轴和交叉轴。
主轴的默认是横向的，与主轴垂直的就是交叉轴。
三、容器属性
在容器中属性中使用display：flex即可启用flex布局。flex布局中有6个属性。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction
flex-direction决定的是flex布局中主轴和交叉轴的位置。默认（row）的情况下，主轴是水平的，交叉轴竖直方向的,如上图。当参数值为column时，主轴是垂直的，交叉轴是水平的。
.box {
display: flex;
flex-direction: row | column;
}3.2 flex-wrap
当容器中的元素在一行中放不下的时候，就会用到这个属性了。默认（nowrap）情况下元素不不换行的。当参数值为wrap时，就会换行，第一行元素在上方。当参数值为wrap-revere时，也会产生换行效果，但是第一行元素会在下方。
.container {
display: flex;
flex-wrap: nowrap;
}当容器的宽度不够时，不换行会导致盒子里的内容的宽和高发生改变。
.container {
display: flex;
flex-wrap: wrap;
}
.container {
display: flex;
flex-wrap: wrap-reverse;
}3.3 flex-flow
flex-flow是flex-direction和flex-wrap两个属性的联合简单写法。但一个值是flex-direction，第二个值是flew-wrap。
.container {
display: flex;
flex-flow: row wrap;
}3.4 justify-content
justify-content这个属性主要是用来控制元素在主轴上的对齐方式。
.container{
justify-content:flex-start | flex-end | center |space-between |space-around;
}- flex-start 元素在主轴方向上左边对齐
- flex-end 元素在主轴方向上右边对齐
- center 元素在主轴方向上居中对齐
- space-betweetn 元素在主轴方向上两端对齐，空白部分均分。
- space-around 元素在主轴上的左右空间相等
3.5 align-items
align-items属性主要控制的元素在交叉轴上的对齐方式。它的初始值为stretch，会默认将元素的高度拉伸到最高元素的高度。
.container{
justify-content:flex-start | flex-end | center |stretch | baseline;
}- flex-start 元素从交叉轴的起点开始对齐
- flex-end 元素从交叉轴的终点开始对齐
- center 元素在交叉轴方向居中对齐
- stretch 如果元素有高度，此时的效果等同于flex-start。没有高度，则会将元素拉伸到元素中的最高。
- baseline 以元素中的第一项的baseline为基准对齐。
3.6 align-content
align-content属性设置的是多轴的对齐方式。如果容器中没有多行项目，该属性不会生效。
flew-wrap: nowrap // flex-wrap属性值是nowrap时，
// align-content属性不会生效。
.container {
display: flex;
flex-flow: row wrap;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}- flex-start 元素从交叉轴方向起点开始填充。
- flex-end 元素从交叉轴方向末尾开始填充。
- center 所有行朝向容器的中心填充
- space-betweetn 元素在交叉轴方向上两端对齐，空白部分均分。
- space-around 元素在交叉轴上的左右空间相等
- stretch 沿着交叉轴占满整个空间
四、项目属性
flex项目中常用的六个属性是：
- order： 定义项目的排序顺序，默认为0
- flex-grow： 定义项目的放大比例，默认为0
- flex-shrink： 定义项目的缩小比例，默认为1
- flex-basis： 定义了在分配多余空间之前，项目占据的主轴空间（main size）。
- flex： 是flex-grow, flex-shrink 和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
- align-self： 覆盖align-items属性。默认值为auto
4.1 order
order属性控制者项目元素在容器中布局时的排列顺序，按照order值进行升序排序，属性值不能为负数。
4.2 flex-grow
flex-grow属性控制着项目元素在容器中的拉伸，属性值不能为负。当父元素的宽度大于子元素宽度之和时，并且父元素有剩余空间，这时，设置了flex-grow属性的元素会分享父元素的空间。
<div class="wrapper">
<div class="box" style="flex-grow: 1;">1</div>
<div class="box" style="flex-grow: 3;">2</div>
<div class="box" style="flex-grow: 1;">3</div>
</div>4.3 flex-shrink
flex-shrink属性控制着项目元素在容器中的缩小，属性值不能为负。当父元素的宽度小于子元素的宽度之和时，并且超过父元素的宽度，这时设置了flex-shrink的元素就会按照一定比列进行收缩。
<div class="wrapper">
<div class="box" style="flex-shrink: 1;">1</div>
<div class="box" style="flex-shrink: 3;">2</div>
<div class="box" style="flex-shrink: 1;">3</div>
</div>4.4 flex-basis
flex-basis属性决定着元素在主轴方向上的初始大小。当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级。
4.5 flex
flex属性规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。
4.6 align-self
align-self属性定义元素单独在交叉轴方向上的对齐方式。默认值为auto，表明元素继承了它的父容器的 align-items属性。如果没有父容器，则为 "stretch"。其他值和align-items的属性值相同。
