伸缩布局

给父元素设置 display：flex/inline-flex/-webkit-flex; 所有子元素都会按照所设置的方式排列。

在父元素中设置六个属性可以控制子元素排列的方式：

1. 决定排列(主轴)方向

　　　　flex-direction: row 默认水平排列 | column | row-reverse | column-reverse;

1. 定义是否换行     

　　　　flex-wrap：nowrap 默认不换行 | wrap |wrap-reverse;

1. flex-flow: row wrap; 默认值

　　　　flex-drection与flex-wrap的简写

1. 定义子元素在主轴的排列方式

　　　　justify-content: flex-start | flex-end | center | space-around | space-between; 

1. 定义子元素在当前行的侧轴对齐方式

　　　　align-items: flex-start | flex-end | center | stretch(填满) |baseline

1. 定义子元素排列多行时在副轴上的排列方式（子元素只排列一行该属性不生效）

　　　　align-content：flex-start | flex-end | center | space-around | space-between |stretch;

给子元素设置

1. 定义单独的子元素放大、缩小倍数 复合属性

　　　　flex: 0 1 auto;

　　　　放大比例flex-grow   缩小比例 flex-shrink  子元素原本大小 flex-basis

1. 允许单个子元素在当前行可与其他元素哪有不一样的对其方式 可覆盖align-items

　　　　align-self： auto |flex-start| flex-end| center| stretch| baseline

设置justify-content：space-around时，若末行排列不满时如何进行左对齐？  添加占位符

有如下两种方式解决：

　　1)       利用伪元素进行占位（不推荐，子元素数目不确定时会出现错位情况）

　　　　:after{

  　　　　content: ‘';  

　　　　}

　　2)       添加若干个子元素,只设置宽度内容为空进行占位 （推荐）

　　　　<div style=”width:200px;”> </div>

　　　　<div style=”width:200px;”> </div>