写在之前
之前学的css布局内容忘得一干二净，通过写项目，重新回顾了下flex布局和float布局的用法，能够理解如何使用flex和float布局了。
下面来重新回顾下flex布局：
首先，flex布局不兼容IE9。
flex布局需要考虑container与items。
一、对于container，
- 首先需要调整container的display:flex(或者inline-flex) 使其变成弹性盒。
- 改变容器里items的流动方向，用flex-direction。
3.选择容器里的item是否换行,flex-wrap,默认不换行nowrap。
4.选择items的横向排版,justify-content:flex-start,flex-end,space-between,center。
5.选择items的纵向排版，align-items
6.对于多行内容，行间肯定有间距的！ 故我们使用align-content。
align-content:flex-start; //把多余的行高全部放下面。
align-content:flex-end; //把多余的行高全部放上面。
align-content:center; //把多余的行高全部放两边。
align-content:space-between; //把空间放中间，上下没有。
直接上图。
注意，若想居中文字，如li里的文字，最好就是不要设置height。
以下是不合适的写法，因为添加border会可能占用line-height，使文字不居中:
直接使用：
> li {
display:flex;
justify-content:center;
align-item:center;
}
//简单粗暴。
二、对于items
1.order
对每个item使用order可以给item排序。
2.flex-grow
使元素长胖，默认为0，一般若一排中有三个元素，设置第一个和最后一个为1，中间为2，可划分整行为1：2：1
** 注意！对于导航栏！一般都是使中间的内容为flex-grow:1,logo和头像都是设置为0，也就是默认不写。**
3.flex-shrink
在空间不够时，条件元素的缩小程度，值越大缩得越小
