CSS3引入了flex布局，随着CSS3被越来越多的浏览器支持，flex布局也得到了越来越多的应用。
Container和Items
flex布局的关键是理解：
-
它首先需要一个container元素（父元素）
-
在container中放置若干items元素（子元素）
-
在container中可以总体上设置如何“摆放”items
-
items中也可以个体（individual）的它自己的摆放方式
<div style="display:flex; /* 由此将该元素设置为flex container */">
<p style="width:200px; background-color:bisque;">item-1</p>
<p style="width:300px; background-color:yellowgreen;">item-2</p>
</div>
如果没有display:flex设置，p标签应该按行上下排列；但现在：
注意没有浮动哟，没有display:inline哟！^_^
以下内容，英文尚可的同学建议直接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/，里面图文并茂，看图识意即可。
Container
可以在container元素上设置的样式有：
flex-direction
设置items排列的方向。
可选项包括：
-
横向从左到右（row）
-
纵向从上到下（column）
-
以及横向纵向的颠倒，row-reverse和column-reverse
flex-wrap
设置当一行/列不能摆放所有items是否可折叠，可选项包括：
-
nowrap：不折叠
-
wrap：从上往下/从左往右折叠
-
wrap-reverse：从下往上/从右往左折叠，^_^
以上两项可以合并简写成 flex-flow：<flex-direction> <flex-wrap>
justify-content
设置items间的间隔距离，可选项包括：
-
从头开始（flex-start），空余部分留在末尾
-
从尾部开始（flex-end），空余部分留在头部
-
挤在中间（center），空余部分均匀放在两边
-
space-between：两边不留空，items间等分
-
space-around：每个item左右两边间隔相等，item之间的距离是item和container内壁间距的2倍
-
space-evenly：items之间、item和container内壁之间的距离都完全相等
align-items
设置每一个items如何在横轴上对齐。可选项包括：
-
stretch：拉伸对齐
-
flex-start：顶（左）对齐
-
flex-end：底部（右）对齐
-
center：中线对齐
-
baseline：基线对齐。不要问飞哥什么是基线，一直没搞懂，也不想搞懂……^_^
align-content
把所有的items当做一个整体，确定其如何和container边框对齐。可选项包括：
-
flex-start
-
flex-end
-
center
以上几项items之间无间距，以下项除了定义和container边框的对齐方式，还定义items间的间隔：
-
space-between
-
space-around
-
space-evenly
-
stretch
-
……
具体还是看图吧……，(*/ω＼*)
PS：以上所有选项第一项均为默认选项。
Items设置
在items中，可以设置：
-
order：次序，值为整整（可以为负），越小的值放在越前面
-
flex-grow：可以“长”到多大，值为正整数。具体来说，以所有items的flex-grow值为分母，当前item的flex-grow为分子，得到每一个item的百分比。
-
flex-shrink：可以“缩水”到多大，值为正整数。算法同flex-grow？
-
flex-basis：默认的item的长/宽，值可以为百分比，也可以为绝对值。
以上2/3/4可以合并简写成flex:<grow> <shrink> <basis>。
最后，用align-self可以覆盖container对当前item的定义。
