flex布局
今天在写底部导航栏的时候，用到了flex布局，不是很熟练使用，一上来就想着align-item，justify-content。。。。( ╯□╰ )当然是达不到想要的效果
基本概念
父元素使用display：flex，则被称为容器，里面的子元素则称为项目。容器默认有两根轴：水平的主轴，垂直的交叉轴，分别是左边和上边为轴的开始。项目默认延主轴排序。
容器属性
flex-direction
决定项目在水平的排列方向，取值：row（默认，在主轴上按列），row-reverse(反列)，column（按行），column-reverse（反行）
flex-wrap
决定项目怎么换行，取值：nowrap(默认，不换行)，wrap（正常换行，从上到下，从左到右），wrap-reverse（反过来，从下到上，还是从左到右)
flex-flow
是前面两个属性flex-direction和flex-wrap的合并简写，默认row，nowrap
justify-content
项目在水平方向的对齐方式，取值：flex-start（左对齐），flex-end（右对齐），center（居中），space-between（两端对齐），space-around（每个项目两侧间隔相同，边框间隔会比项目间间隔小一半）
align-item
项目在垂直方向对齐方式，取值：stretch（默认，当未设置高度或为auto时，占满容器）flex-start（上对齐）flex-end（下对齐）center（中心对齐）baseline（文字基线对齐）
align-content
多跟轴线对齐。取值：stretch（默认，在项目垂直方向之间增加空白）flex-start （取消项目之间的空白并将其置顶） flex-end（取消项目之间的空白并将其置底） center（取消项目之间的空白并将其垂直居中） space-between （垂直方向两端对齐，项目之间增加相同空白间隔） space-around （项目上下保留相同的空白）
项目属性
order
项目排序顺序，数值越小越靠前，默认0，可以为负数
flex-grow
项目的放大比例，默认0（不放大），如果都为1，将等分剩余空间。
flex-shrink
项目的缩小比例，默认1（空间不足，缩小），如果都为1，等比缩小。负值无效
flex-basis
在分配多余空间前，项目在水平方向的大小，默认auto（项目本身大小），可以设px
flex
是flex-grow、flex-shrink、flex-basis三者简写，默认0 1 auto，优先写这个而不是单独写三个属性，浏览器会自动推算。
align-self
定义单个项目的对齐方式，可覆盖align-item（父元素指定的排序方式），默认auto（继承父元素的属性），没有父元素则为stretch。取值与align-item的取值一致，还有一个auto。
参考文章：阮一峰flex布局