Flexbox-弹性盒子
Flexbox布局
基本说明：
- 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（有可能是横向的行，也有可能是纵向的列）
- 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。
更改flex的方向（行还是列？）
- 选择哪些元素将设置为柔性的盒子，给这些元素的父元素
display设置一个特定的值。 - 弹性盒子提供了
flex-direction这样的属性，它可以指定主轴的方向
flex-direction: column;
此外，row-reverse 和 column-reverse 值反向排列 flex 项目。
元素溢出怎么办？换行！
使用定宽或者定高的时候，可能处于容器中的 弹性盒子子元素会溢出，破坏了布局。
flex-wrap: wrap;
缩写：flex-direction: row;和 flex-wrap: wrap;替换为flex-flow: row wrap
flex项的动态尺寸
注意：这里需要设置的元素是之前准备设为flex的元素，不是父元素！
article {
flex: 1 200px;
}
article:nth-of-type(3) {
flex: 2 200px;
}
假设现在有3个article元素，那么第1个和第2个article各占一个单位，而第3个article占两个单位，所以三者之间的所占大小比例为，1：1：2。
后面的200px表示“每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享“。
无单位的比例还可以使用单独全写flex-grow属性的值。而上面的200px最小值可以用flex-basis全写代替。
水平和垂直居中
先看一段代码：
div {
display: flex;
align-items: center;
justify-content: space-around;
}
align-items控制flex项在交叉轴上的位置。默认的属性值是stretch
justify-content控制flex项在主轴上的位置。
以上2个属性的属性值，均可使用以下值：center, flex-start, flex-end
justify-content还可以使用space between，它和 space-around 非常相似，只是它不会在两端留下任何空间。
还可以用align-self覆盖align-items的行为。
flex项排序
div {
order: 1;
}
所有 flex 项默认的 order 值是 0。
order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
flex嵌套
弹性盒子也能创建一些颇为复杂的布局。设置一个元素为flex项目，那么他同样成为一个 flex 容器，它的直接子节点也表现为 flexible box 。
