Flex布局

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

任何一个容器都可以指定为Flex布局。

#box{
    display: flex;
    width: 500px;
    height: 300px;
    border: 10px solid red;
}
一：有六个属性设置在box父容器上，来控制子元素的显示方式；分别是：
flex-direction    设置主轴对齐方式  默认 row  x轴从左到右；
flex-wrap   子元素换行的方式  默认nowrap ；
flex-flow   flex-direction和flex-wrap的简写 默认row nowrap；
justify-content  子元素的对齐方式  默认flex-start  左对齐
align-items   
align-content
  1、flex-direction 决定主轴的对齐方向，分别有四个属性：       

row（默认值）：主轴为水平方向，起点在左端。   
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.  flex-wrap ：定义子元素超过一行，如何换行，分别有三个属性：

nowrap（默认值）：默认不换行。   
wrap：换行，第二行在第一行下面，从左到右
wrap-reverse：换行，第二行在第一行上面，从左到右；
   2.1  nowrap：不换行，如果子元素超过父元素的宽度或者高度，会自动在主轴方向压缩

   下面的例子，主轴是x轴，默认不换行，但是父元素的宽度是500，子元素明显大于父元素宽度，会默认宽度变窄；