布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
flex布局是什么？
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。flex 布局就是通过给"父元素"不同的属性 控制"子元素"的排列方式
任何一个容器都可以指定为Flex布局。
基本语法
.box{
display:flex
}
flex布局基本属性
| 属性 | 含义 | 参数 |
|---|---|---|
| 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> |
| justify-content | 定义的是子级项目在主轴上空间的分配 | 开始flex-start 末尾flex-end 中间center 首尾贴紧中间均匀分开space-between 均匀分开但最左边和最右边大小和中间不一样space-around 绝对的均匀分散space-evenly |
| align-items | 定义项目在交叉轴如何对齐 | 交叉轴的起点对齐flex-start 交叉轴终点对齐flex-end 交叉轴中点对齐center 项目的第一行文字的基线对齐baseline 如果子及未设置高度或为auto将铺满整个容器的高度stretch |
