谈谈 flex
flex 是 css3 中新增的一种布局方式，也就是弹性盒模型布局。弹性盒子中子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应空间。
而之前 css 标准中为我们提供了 3 中布局方案，也就是标准文档流布局、浮动布局、和定位布局。这几种布局方式搭配，可以搞定布局上常见的需求，但比如水平居中，和垂直居中，采用定位布局的方式，它不够语义化，并且不够灵活。所以在这种情况下，第 4 种布局方式：flex 布局就诞生了。它可以设置一个属性就能实现居中，并且可以随着窗口的缩放自适应。
使用 flex 布局的话，首先需要设置父元素的 display 的值为 flex 或 inline-flex，也就是定义一个弹性容器。flex 的核心概念就是 容器 和 轴，容器包含外层的父容器和内层的子容器，轴包括主轴和交叉轴，可以说 flex 布局的特性全都构建在这两个概念上。flex 布局涉及的 css 属性除了 display 的值为 flex 和 inline-flex 外，共有 12 个属性，其中，父容器和子容器各 6 个。不过，常用的属性只有 4 个，子容器和父容器各 2 个。