Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：
自从用习惯flex布局我基本已经不怎么使用float了。
flex属性繁多，但可以分为俩类：父容器的属性和子项的属性，所有的属性值几乎都和排列、对齐、占地面积3类特性相关。
1.父容器属性
| 用于父元素的样式 | 值 | 作用 | 特性分类 |
| flex-direction | row、row-reverse、column、column-reverse | 定义子项在容器内的排列方向 | 排列 |
| flex-wrap | nowrap、wrap、wrap-reverse | 定义子项在容器内的换行结果 | 排列 |
| flex-flow | flex-flow是flex-direction和flex-wrap属性的简写形式，默认值为row nowrap | flex-flow是flex-direction和flex-wrap属性的简写形式，默认值为row nowrap | 排列 |
| justify-content | flex-start、center、flex-end、space-between、space-around | 定义子项在容器内水平对齐方式 | 对齐 |
| align-items | flex-start、center、flex-end、baseline、stretch | 定义子项在容器内的垂直对齐方式 | 对齐 |
| align-content | flex-start、center、flex-end、space-between、space-around、stretch | 定义多行子项在容器内整体垂直对齐方式 | 对齐 |
2.子项属性
| 用于子元素的样式 | 值 | 作用 | 特性分类 |
| order | 需整数integer |
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 | 排列 |
| flex-grow | <number> | 属性定义项目的放大扩展比例，默认为0，即如果存在剩余空间，也不放大。负值对该属性无效 |
占地面积 |
| flex-shrink | <number> | 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效 | 占地面积 |
| flex-basis | number或百分比 | 属性定义了在分配多余空间之前，项目占据的主轴空间它的默认值为auto，负值对该属性无效 |
占地面积 |
| flex | 默认值为0 1 auto，后两个属性可选 |
是flex-grow, flex-shrink 和 flex-basis的简写 |
占地面积 |
| align-self | flex-start、center、flex-end、baseline、stretch | 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。表示继承父元素的align-items属性，如果没有父元素，则等同于stretch |
对齐 |