Flexbox布局（ Flexible Box 或CSS3 弹性布局），是CSS3中的一种新的布局模式，是可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易，可以使用更少的代码，更简单的方式实现更复杂的布局。它可以实现：

• 如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；
• 可以快速让他们布局在一列；
• 可以方便让他们对齐容器的左、右、中间等；
• 无需修改结构就可以改变他们的显示顺序；
• 如果元素容器设置百分比和视窗大小改变，不用提心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

浏览器兼容性

红色代表不支持，绿色代表支持，暗绿色代表部分支持，其中IE10、IE11目前使用中出现了大量的bug，Android4.3只支持老的flexbox规范。可以发现该属性在移动端的使用还是可能的，不过要加上老的规范写法。

容器属性（父元素属性）

1. display

取值：

• flex 将对象作为弹性容器显示
• inline-flex 将对象作为内联块级弹性容器显示。

2. flex-direction 决定主轴的方向（即项目的排列方向）。

取值：

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

3. flex-wrap 设置容器内的项目排列不下时是否换行

取值：

• wrap 换行
• no-wrap 一行显示，不换行
• wrap-reverse 倒序换行，将各行的顺序倒序排列

4. justify-content 定义了项目在主轴上（依据设置的主轴方向而定）的对齐方式。

取值：

• flex-start 左对齐
• flex-end 右对齐
• center 居中对齐
• space-between 俩端对齐
• space-around 项目间隔相同对齐

5.align-items 定义项目在交叉轴上的对齐方式。

• flex-start 起点对齐
• flex-end 终点对齐
• center 居中对齐
• baseline 项目的第一行文字的基线对齐。
• stretch 如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content 当项目有多列（行）时，该属性定义各轴的对齐方式

取值：

• flex-start 起点对齐
• flex-end 终点对齐
• center 居中对齐
• space-between 项目间隔相同对齐
• space-around 每行（列）的间隔俩侧相等对齐
• stretch 项目布满容器对齐

项目属性（子元素属性）

1. order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2. flex 定义了项目的大小，是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

(1) flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

(2) flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

(3) flex-basis 定义项目占据的空间,然后再分配多余空间。

3. align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的

测试用例

这几天在项目中小范围试用了下（移动端），结果UC和微信浏览器不支持，当时就蒙逼了好吗。后来查了下，发现加上老版本的写法和前缀即可。至少借的几个手机测试是通过了。

<div class="flexbox">      <div>1</div>      <div>2</div>      <div>3</div>      <div>4</div>      <div>5</div>  </div>    <style>       .flexbox{          display: -webkit-flex;          display: flex;          /*兼容老版本*/          display: -webkit-box;          -webkit-align-items: center;          align-items: center;          /*兼容老版本*/          -webkit-box-align: center;          border:1px solid #000;          min-height:200px;      }      .flexbox>div{          flex: 1;          -webkit-flex: 1;          -webkit-box-flex: 1;          -moz-box-flex: 1;          -ms-flex: 1;          background-color: green;          border:1px solid blue;      }  </style>