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

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

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

flex布局有以下6个属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1.flex-direction -- 元素排列方向

有4个值：

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

2.flex-wrap -- 元素是否换行

如果元素在一行内排满，且多出来的被隐藏掉，可以设置 flex-wrap来换行。
有3个值：

• nowrap（默认）：不换行
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

3.flex-flow -- 是flex-direction属性和flex-wrap属性的简写形式，默认值为 [ row nowrap ]

flex-flow: <flex-direction> || <flex-wrap>;

4.justify-content

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.align-items -- 定义项目在交叉轴上如何对齐

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

1. [flex一行显示两列（CSS）]

//  外层
display: flex;
flex-wrap: wrap;

//  里层 
width:49%;