传统的布局方案，基于 display + position + float 属性实现，但是，传统的布局方案有很多限制，在布局要求越来越多的今天，很多布局需要花费很大精力才能实现。
在这样的背景下，Flex 布局在 2009 年横空出世，它可以轻松地满足各种各样的布局需求，例如垂直居中等。它是一个新的盒子模型概念，弹性容器中的子元素可以在任何方向上根据已有空间进行伸缩自适应，以实现最佳的填充视觉效果，并且子元素之间不会相互重叠。
运用 Flexbox 可以很容易实现垂直居中等。其更适用于一个 UI 组件内的元素布局呈现。
使用 Flex 很简单，只需要指定一个盒子的 display 属性即可以。
.container {
display: flex || inline-flex;
}这个时候，这个盒子被叫做“弹性容器”（flex container），盒子里面的子元素叫做“弹性项目”（flex items）。在这个容器中，存在两条轴线，一条沿着默认书写方向的主轴(main axis)，以及和它垂直的交叉轴(cross axis)， Flex 布局就是在这样的环境下实现的。
书写模式是一个 W3C 新增的属性，可以通过
direction: ltr | rtl;来设置，是文本在页面内的排列方向，由于语言排列方向的差异，会有不同书写方向的需求。默认情况下，其是从左到右，从上到下来书写的，这种情况下，水平方向就是 flex 项目的主轴方向，垂直方向就是交叉轴方向。
容器内的子元素叫做 flex 项目(flex items)。下面，就是 Flex 的一些基本概念。
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/2478/viewspace-2808318/ ，如需转载，请注明出处，否则将追究法律责任。
