Flex(弹性)布局常用属性及方式

Webkit内核的浏览器，必须加上-webkit前缀。

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

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

flex常用属性（从高频往下罗列）

flex-direction （确定主轴的方向，默认row横向）

• flex-direction: row
  • 主轴为水平方向，起点在左端
• flex-direction: column
  • 主轴为垂直方向，起点在上沿
• flex-direction: row-reverse
  • 主轴为水平方向，起点在右端
• flex-direction: column-reverse
  • 主轴为垂直方向，起点在下沿
    

justify-content（主轴排布形式，常用space-between&