初识flex
之前我们写布局都是基于浏览器的盒模型，通过浮动的方式来排列界面的，这种方式有很多浏览器的 bug 和困扰我们的问题， 而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。
flexbox 是基于两个坐标轴来实现的， 类似于 Android 中的线性布局 LinearLayout， 如果我们要使一个容器成为 flexbox 就需要设置 display: flex;。
flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下：
基本使用
我们先来定义一个 flexbox 容器, 在里面放几个 flexitem：
<body>
<div class="flexbox">
<div class="flexitem">我是 DIV 标签内容</div>
<p class="flexitem">我是 P 标签内容</p>
<span class="flexitem">我是 SPAN 标签内容</p>
</div>
</body>
.flexbox{
width: 600px;
height: 200px;
margin: 50px auto;
background: bisque;
}
.flexitem{
background:brown;
color:white;
}
display: flex
接下来见证奇迹的时刻，给 .flexbox 添加 display: flex; 如下：
.flexbox{
width: 600px;
height: 200px;
margin: 50px auto;
background: bisque;
display: flex;
}
为了看的清除我清除了元素的 padding 和 margin 并分别设置了背景，我们发现在 flexbox 容器内，所有块元素和行内元素都会变成和父容器高度相同，宽度自适应的方块。
flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）, 上面默认的是 flex-direction: row.
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
例如我们设置为 row-reverse
.flexbox{
width: 600px;
height: 200px;
margin: 50px auto;
background: bisque;
display: flex;
flex-direction: row-reverse;
}
设置为 column 会发现元素竖向排列，而且和父容器宽度相同，高度自适应， 我们可以猜得出 column-reverse 是竖向反序排列。
我们来尝试一种情况，就是当他们的宽度不同时如何排列：
会发现默认的排列方式是靠左边，这个其实也有对应的配置，我们接着看。
flexbox的属性
除了设置元素的排列方式外还可以在 flexbox 容器上面设置下面 5 个属性：
flex-wrap
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
- nowrap（默认值）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
为了测试，我们给 flexbox 中再添加 3 个 box 看看效果，实际上就是 flex-wrap: nowrap 的默认值。
接下来我们再分别试一下另外两个设置。
flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
align-items
align-items属性定义项目在交叉轴上如何对齐。它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
上面我们提到过，如果他们的宽度不同时会偏向一个方向排列，我们可以通过设置 align-items: center 属性让居中显示：
.flexbox{
width: 600px;
height: 200px;
margin: 50px auto;
background: bisque;
display: flex;
flex-direction: column;
align-items: center;
}
我们会发现一个现象， align-items: stretch 时候 span 标签是占满了整行（因为设置的是竖直方向）， 而如果 align-items 不是 stretch 则只会被自身内容撑开。
justify-content
justify-content属性定义了项目在主轴上的对齐方式。它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
上面虽然我们让三个 box 在横向（竖直的交叉轴方向） 中间居中了，但是我们要使他们整体竖直居中就需要用到 justify-content: center
.flexbox{
width: 600px;
height: 200px;
margin: 50px auto;
background: bisque;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
上面的设置已经能解决所有只有一行或者一列的情况，但是当我们的 box 数大于一行的时候就会得到可能不是我们需要的效果，效果如下：
.flexbox{
width: 600px;
height: 200px;
margin: 50px auto;
background: bisque;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}
为了方便查看, 将主轴方向设置为了水平方向，并添加了 4 组 12 个 box.
这可能不是我们想要的结果，我们要的是整体居中，而不是一行一行的居中（这里就像文本一样），添加 align-content:center 后效果如下：
同理，我们如果设置 align-content: flex-start 就会全部挤到左上角， 如果我们设置 align-content: flex-end 就会全部挤到左下角。
这里要注意的是 align-content 是多行情况下的 align-items 的替代属性。
flexbox 的行内和块属性
上面我们都使用的是 display: flex , 它并没有改变 div 的块元素属性，所以默认占满父容器，我们也可以设置 display: inline-flex 来使其变为行内元素。
flexitem的属性
除了上面的 flexbox 可以添加属性外，我们也可以给 flex item 设置属性：
order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
flex-grow
flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
div.flexitem {
background:brown;
order: 2;
flex-grow: 1;
}
p.flexitem{
background: yellow;
color:black;
order: 1;
}
span.flexitem {
background: green;
order: 3;
}
上面设置了中间 box 的 flex-grow 为 1 则填充满剩余空间（会Android的朋友很好理解了，这个就类似于权重）。
flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
