一个Flex布局的实例
Jul 3, 2016
Flex布局是一种更有效，更灵活布局方式，主要思想就是赋予容器（container）改变内部子项目（items）的宽度、高度或次序，通过子项目的扩展/收缩，以达到最好的利用可用空间的目的。
Flex还有一个更重要的特点，它是无方向性的（block是垂直向布局，inline是水平向布局），也因而更灵活。
1.属性简介
Flex布局中定义了很多属性，这些属性可以分为两类，一类是container属性，另一类是items属性。
- container属性：diplay flex-direction flex-wrap flex-flow justify-content align-items align-content
- items属性：order flex-grow flex-shrink flex-basis flex align-self
2.一个实例
这里用一个例子说明部分属性的使用。例子的布局要求来自这里http://ife.baidu.com/task/detail?taskId=10
Demo见CodePen
下面梳理例子中用到的几个属性：
- justify-content: space-between; 用于调整四个item在水平方向的分布。justify-content取值有如下5种，默认是flex-start。
- align-items: center; 用于高度方向的中间对齐。align-items取值有如下5中，默认为stretch；baseline指的是项目的第一行文字基线对齐
flex-wrap: wrap; 当一行排不下时换行。flex-wrap的取值有三个：nowrap（默认）/wrap/wrap-reverse
order: -1; 控制items的排序，默认值为0，值越小越靠前。