概念
flex布局是css3中新增加的一种布局方式，也叫做弹性盒子模型。用来为盒状模型提供最大的灵活性。Flex布局有两层，采用flex布局的元素称为flex容器，其子元素则自动成为flex item 即项目。flex内部的元素具有伸缩性,可按照设置的比例决定元素的宽高。flex最大的特点就是布局方便，简单，而且有较好的自适应能力。
容器的属性
flex-direction
作用：决定主轴的方向。
取值：
row(默认值)：主轴为水平方向，起点在容器的左端row-reverse:主轴为水平方向，起点在容器的右端column:主轴为垂直方向，起点为容器的顶端column-reverse:主轴为垂直方向，起点为容器的底端
flex-wrap
作用：如果一条轴线排不下所有内容该如何换行
取值：
nowrap(默认值)：不换行wrap:换行，和书写方式一样，第一行在第二行的上方wrap-reverse:换行，第一行在第二行的下方
justify-content
作用：定义了项目在主轴上的对齐方式
取值：
flex-start(默认值):从主轴开始的地方flex-end:从主轴结束的地方center:居中对齐space-between:两端对齐，项目之间的间隔相等space-round:每个项目之间的距离相等
align-items
作用：定义了项目在侧轴上的对齐方式
取值：
flex-start:从侧轴开始的地方，一半是容器的顶部flex-end:从侧轴结束的地方center:居中对齐baseline:沿着项目第一行文字的基线对齐stretch(默认取值):如果项目没有设置高度，则占满整个容器的高度
项目的属性
flex-grow
作用：定义项目的放大比例，默认值是0，表示即使存在剩余空间，也不会放大
注意：如果所有项目的flex-grow属性都为1，则他们将均分剩余的空间，如果有一个项目的flex-grow为2，其他项目为1，则前者的所占的剩余空间是其余项的一倍
flex-shrink
作用：定义项目的缩小比例，默认值是1，表示即使空间不够，也不去缩放
注意：如果所有项目的flex-shrink都为1，当空间不足时，他们将等比例缩放，如果一个项目的flex-shrink为0，而其余的为1时，如果空间不够，前者不缩放。负值对该属性无效
flex-basis
作用：定义了在分配多余空间之前，项目所占据的主轴空间。浏览器根据这个属性，计算是否还有剩余空间。它可以设置为和width一样的具体的值，表示一个固定的值。
flex
作用:这个属性是flex-grow，flex-shrink,flex-basis的简写，默认值是0 1 auto,其中后两个属性是可选的。
