Flex布局

flex意为--弹性布局，给盒模型提供了极大的灵活性。

注意：使用flex布局后，子元素float、clear、vertical-align的属性会失效。

采用flex布局的元素，称为flex容器，它的所有子元素自动成为容器成员，称为flex项目，包含了6个属性。

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-wrap：

.box{ 
flex-wrap:nowrap(默认，不换行)

flex-wrap：wrap（换行，第一行在上方）

flex-erap：wrap-reverse（换行，第一行在下方）
 }

项目的属性：

1. order: integer 定义项目的排列顺序。数值越小，排列越靠前，默认是0
2. flex-grow：number 定义项目的放大比例，默认为0，即如果传值剩余空间，也不放大。
3. 注意：如果所有的项目属性为1，则他们将等分剩余空间。如果其中一个项目的flex-grow属性是 2，其他项目为1，则属性为2的属性所占的空间比其他项目多一倍。
4. flex-shrink：number 定义了项目的缩小比例，默认是1，如果空间不足，该项目将缩小 注意：负值无效 当所有属性都为1时，空间不足，等比例缩小。如果有一个属性是0，其他项目属性是1，空间不足时， 属性为0的不会缩小。
5. flex-basis：length|auto 默认值是auto，定义项目本来的大小（可以设为跟width或height属性一样的值） ，则项目将占据固定空间。
6. flex：none | auto
7. align-self：auto | flex-start | flex-end | center | baseline | stretch

原文链接：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)