从流式布局到flex布局，css中的各种布局模式为开发提供了诸多便利，这篇文章是对Flex布局相关内容的总结。
在上一篇文章《浮动布局知多少》中，笔者对浮动布局做了解读。传统的css布局方案是以盒子模型为基础，使用流式布局以及定位和浮动来实现效果。虽然这种布局方案已经足够强大，但是在特定使用场景仍会显得力有不逮。今天介绍的Flex是一个更为强大的布局神器。
何为Flex布局
Flex（Flexible Box）即弹性布局，与传统布局模式一样，flex可以轻松实现诸如招聘网站相邻的工作模块、新闻网站并列的时事资讯等等效果。Flex布局极大地扩展了盒子模型的灵活性，是更为成熟方便的布局解决方案。
容器和项目
要学习Flex布局，就必须先理解容器和项目。
容器：容器即使用flex的盒子，需要为其设置display:flex。
项目：容器的子元素叫做“项目”
主轴和交叉轴
Flex布局以水平方向的主轴和垂直方向的交叉轴为基准进行布局，类似于数学函数的坐标轴：
容器的属性
Flex有如下重要属性：
flex-direction
flex-direction是主轴方向，它决定了主轴的方向，默认值是row
flex-direction: row/column/row-reverse/column-reverse; //可以取四个值
设置为row时，项目会沿着从左到右的主轴方向排列
设置为row-reverse和column-reverse时，分别为从右到左的水平方向和从下到上的垂直方向。
flex-wrap
flex-wrap决定了项目在宽度不足的情况下是否会换行，默认值是nowrap，不换行。
flex-wrap: nowrap/wrap/wrap-reverse;
flex-wrap设置为wrap与wrap-reverse时，换行方向相反。
flex-flow
flex-flow是个比较特别的属性，它是上述flex-direction和flex-wrap的合体。可以同时定义这两个属性。栗子：
flex-flow: column wrap;
justify-content
justify-content决定了子元素在主轴方向的位置，取各值效果如下：
justify-content: flex-start/flex-end/center/space-between/space-around
align-items
align-items决定了子元素在交叉轴方向的位置，效果和justify-content类似。
align-items: flex-start/flex-end/center/baseline/stretch;
align-content
align-content是上述justify-content和justify-content的合体
项目的属性
order
order决定了子元素的排列顺序，order越小越靠前，栗子：
order: 2; //小a的order设置2
order: 1; //小b的order设置1
flex-shrink
flex-shrink为空间不足时的缩放比列
flex-shrink:50; //给小a设置flex-shrink
flex-grow
flex-grow为空间较大时的放大比例，与flex-shrin效果相反。
flex-basis
flex-basis是子元素在主轴上占据的空间，默认值为项目自身的宽度。
flex-basis:350px; //给小a设置
flex
flex是上述三个属性flex-shrink，flex-grow，flex-basis的合体。
align-self
align-self可以单独设置某个项目的align-items。
结束
本文是对弹性布局flex的总结与学习心得，希望能对读者有所帮助。
