一、什么是Flex布局？
Flex又称为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局 。采用Flex布局的元素，称为Flex容器（flex container）。它的所有子元素称为flex项目（flex item）。设为flex布局以后，子元素的float、clear和vertical-align属性将失效
二、容器的属性
1、flex-direction
flex-direction：决定项目的排列方向。它有四个值：row 、row-reverse 、 column 、column-reverse
.box{
flex-direction:row | row-reverse | column | column-reverse;
}
row（默认值）：从左往右，水平方向显示
row-reverse:从右往左，水平方向显示
column:从上往下，垂直方向显示
column-reverse:从下往上，垂直方向显示
2、flex-wrap
flex-wrap：决定如何换行。
当flex item在一条轴线上显示不下的时候，如何进行换行。它有3个值nowrap 、wrap 、wrap-reverse
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默认）：不换行
wrap:换行，第一行在上方
wrap-reverse:换行，在第一行的下方
3、flex-flow属性
flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。
.box{
flex-flow:<flex-direction> || <flex-wrap>;
}
4、 justify-content属性
justify-content：定义项目在轴上的对齐方式。它有5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右
.box{
justify-content:flex-start | flex-end | center | space-between |space-around;
}
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between:两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等
下面是flex的应用，效果如下,github的代码地址：https://github.com/ducaifeng86/CSS-Practice