深入浅出CSS的Flex布局

文档中心

Flexbox，弹性盒子布局，跟浮动布局相比，Flexbox的可预测性更好，还能提供更精细的控制。它也能轻松解决困扰我们许久的垂直居中和等高列问题。

Flexbox的原则

首先需要使用display属性，把元素设置为弹性容器，它的子元素就是弹性子元素。

弹性子元素默认是在同一行按照从左到友的顺序并排排列。如下图：
深入浅出CSS的Flex布局
flexbox默认水平方向为主轴，垂直方向为副轴。

需要兼容其他浏览器，则需要添加对应浏览器的前缀：

  display: flex;  display: -webkit-flex;  display: -ms-flexbox;

Flexbox允许使用margin: auto;来控制弹性子元素的之间的可用空间。