弹性盒子布局

弹性父元素的属性：（都是写在父元素上）

1：设置弹性盒 display：flex块级弹性盒

                          inline-flex 行内弹性盒

      弹性子元素如果没有设置宽高 就是内容的宽高

       弹性子元素的总宽度超过父元素 会收缩并在一行显示直到溢出

2:是否允许弹性子元素换行显示

flex-wrap：wrap

wrap-reverse 允许并且翻转

3:弹性子元素行的对齐方式（注意：弹性子元素必须存在换行 align-content（控制多行）必须与align-content连用

flex-start  center flex-end space-around 中间是两端的倍数 space- between 两端对齐 evenly平均分配

4，如果弹性子元素设置侧轴对齐方式 align-items 那么宽度高度就是内容的宽高

5，弹性子元素的 排列方式

flex-direction:row/column/reverse

6 弹性子元素主轴对齐方式

justify-content：

center 

space-around 中间是两端的倍数

space-between 两端对齐

space-evenly 平均分配

7.弹性子元素的侧轴对齐方式

自左向右排 y轴是侧轴

自上而下排 x轴是侧轴

align-items  

 弹性子元素的相关属性（必须在父元素是弹性盒子的前提下）

1，order弹性子元素的顺序 值越小越靠前显示 可以为负值 

2，flex 分配父元素的宽度和高度 每一个所占的份数 （0 1 auto）

3，flex-basis 设置弹性子元素的高度和宽度（很少用）

4，flex-grow 分配父元素剩余的空间（1 0）

5，flex-shrink 是否允许弹性子元素进行收缩默认1允许 0不允许

6，align-self 弹性子元素对齐的方式

           flex-start

           flex-end 

           center

在学习完弹性盒子的相关属性之后去以下网站玩这个小游戏以增强记忆：
http://flexboxfroggy.com/  

重要事情说三遍！

重要事情说三遍！

重要事情说三遍！