第一章：flex布局

flex

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性，对于某些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

flex演示地址

给元素设置display: flex/inline-flex可以将其变成弹性容器:

弹性容器具有以下特点：

• 设置为display: flex可以具有块状特征（即宽高生效，独占一行），设置为inline-flex则呈现行内块的特征。

• 每个弹性容器都有两根轴：主轴（横轴）和交叉轴（侧轴、纵轴），两轴之间成90度关系。注意：水平的不一定就是主轴。

• 每根轴都有起点和终点，这对于元素的对齐非常重要。

• 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。

• 弹性元素也可以通过display: flex/inline-flex设置为另一个弹性容器(但不会独占一行)，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。

flex demo
链接：https://pan.baidu.com/s/1aJSeE3DhAXFGbCpfYXpZdg
提取码：g1z6