弹性伸缩布局 flex (新)

知识点1： 首先，先设置 display: flex;  弹性布局

知识点2：flex-direction   设置方向 

   

例：(注意看上边文字)  flex-direction:row;

flex-direction:row-reverse

 flex-direction:column;

flex-direction: column-reverse

知识点3：flex-wrap      //设置无法容纳时，自动换行  （内容一行容不下的时候才有效）

知识点4：flex-flow 属性是集合了排列方向和控制换行的简写形式。

知识点5： justify-content: 设置对齐方式

例： flex-start:

flex-end:(仔细看文字。与flex-direction不要混淆)

center：

space-between:

space-around:

知识点6：align-items 处理伸缩项目容器的额外空间。

知识点7： 

align-self 和 align-items 一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所有的值和 align-itmes 一致。

知识点8：flex 用来控制伸缩容器的比例分配。

知识点9：order 属性和 box-ordinal-group 属性一样控制伸缩项目出现的顺序。