CSS3 flex弹性布局

.box{
  display: flex;
  display: -webkit-flex; /* Safari */
}
display: inline-flex;

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

---

语法：
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

---

容器属性如下： .box{}

• flex-direction 项目的排列方向
• -