基本概念

css3 中Flex意为‘弹性布局’，采用css3 Flex布局的元素，称为Flex容器,它的所有子元素自动成为容器成员，称为Flex项目（flex item）.容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。(如图

QQ截图20161103204858.jpg

Flex的属性（容器属性）

1.flex-direction属性
flex-direction 属性决定主轴的方向（即项目的排列方向）。
（如图）

未标题-1.jpg

他有4个值：
row （默认值）：主轴为水平方向，起点在左端。

row-reverse ：主轴为水平方向，起点在右端。

column ：主轴为垂直方向，起点在上沿。

column-reverse ：主轴为垂直方向，起点在下沿。

2.flex-wrap属性
他有三个值：
(1) nowrap(默认)：排在一行不换行。
(2) wrap :换行，第一行在上方。
(3)wrap-reverse：换行，第一行在下方。

3.flex-flow属性
flex-flow属性是flex-wrap和flex-direction的简写，一般默认值是
flex-flow: row nowrap;

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

flex-start （默认值）：左对齐

flex-end ：右对齐

center ：居中

space-between ：两端对齐，项目之间的间隔都相等。

space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。（如图）

QQ截图20161103211550.png

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

5.algin-itmes属性
align-items 属性定义项目在交叉轴上如何对齐。
.box { align-items: flex-start | flex-end | center | baseline | stretch; }

6.algin-content属性
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

（5和6属性有兴趣的朋友可以自己试试~~）
以上6个属性是容器的属性也就是外面的壳属性