盒模型

display: flex; 把容器设置为弹性盒模型

（设置为弹性盒模型之后，浮动，定位将不会有效果）

给父元素设置的属性：

　　　　　　　　　　（1）display：flex---把容器设置为弹性盒模型。

　　　　　　　　　　（2）flex-direction---设置弹性盒模型主轴方向

　　　　　　　　　　　　　　默认情况下主轴（水平方向从左到右），侧轴就是垂直方向

　　　　　　　　　　　　　　取值：

　　　　　　　　　　　　　　　　　1)row---从左到右（默认值），侧轴就是垂直方向

　　　　　　　　　　　　　　　　　2）row-reverse ---- 从右到左，侧轴就是垂直方向

　　　　　　　　　　　　　　　　　3）column---从上到下，侧轴为水平方向

　　　　　　　　　　　　　　　　　4）column-reverse---从下到上，侧轴就是水平方向

　　　　　　　　　（3）justify-content--设置主轴的对齐方式

　　　　　　　　　　　　　　取值：

　　　　　　　　　　　　　　　　1）center---居中对齐

　　　　　　　　　　　　　　　　2）flex-start---主轴的起点对齐

　　　　　　　　　　　　　　　　3）flex-end--主轴的末端对齐

　　　　　　　　　　　　　　　　4）space-between--两端对齐,把多余的空白平分到子元素与子元素之间

　　　　　　　　　　　　　　　　5）space-around--把多余的空白处平分到元素的两侧

　　　　　　　　　（4）align-items---侧轴的对齐方式（侧轴存在单行的情况）　　

　　　　　　　　　　　　　　取值：

　　　　　　　　　　　　　　　　1）center--居中对齐

　　　　　　　　　　　　　　　　2）flex-start--侧轴的起点对齐

　　　　　　　　　　　　　　　　3）flex-end--侧轴的末端对齐

　　　　　　　　　（补充）默认情况下主轴从左到右（主轴的起点是左边，末端是右边）

　　　　　　　　　　　　　　　　　flex-direction: row-reverse;得到一个主轴从右到左（主轴的起点是右边，末端是左边）

　　　　　　　　　　　　　　　　　　flex-direction: row-reverse;

　　　　　　　　　　　　　　　　　　justify-content: space-around;

　　　　　　　　　　　　　　　　　　align-items: flex-start;

　　　　　　　　　　弹性盒的子元素默认情况下是不换行，所有元素在同一行显示

　　　　　　　　　　（5）flex-wrap--设置是否换行

　　　　　　　　　　　　　　取值：

　　　　　　　　　　　　　　　　1）wrap---换行

　　　　　　　　　　　　　　　　2）nowrap--不换行（默认值）

　　　　　　　　　　　　　　　　3）wrap-reverse---反转换行

　　　　　　　　　　　（6）align-content--侧轴存在多行的情况下的对齐方式

　　　　　　　　　　　　　　取值：

　　　　　　　　　　　　　　　　1）center---居中对齐，行与行之间没有间距

　　　　　　　　　　　　　　　　2）flex-start--侧轴的的起点对齐，行与行之间没有间距

　　　　　　　　　　　　　　　　3）flex-end---侧轴的的末端对齐，行与行之间没有间距

　　　　　　　　　　　　　　　　4）space-between--两端对齐，把多余的空间平分打破行与行之间

　　　　　　　　　　　　　　　　5）space-around---把多余的空间平分到行的两侧

 

 

 

给子元素设置的属性：

　　　　　　　　　　（1）align-self---设置单个子元素在侧轴的对齐方式

　　　　　　　　　　　　取值：

　　　　　　　　　　　　　　1）flex-start---侧轴的起点对齐

　　　　　　　　　　　　　　2）flex-end---侧轴的末端对齐

　　　　　　　　　　　　　　3）center---居中对齐

　　　　　　　　　　　　　　4）auto--具体笔记在下一个文件

　　　　　　　　　　　　　　5）stretch--拉伸，子元素有固定的值的时候，将不会被拉伸开

　　　　　　　　　　（2）order--设置子元素排列的优先级

　　　　　　　　　　　　　　　　取值：number ，默认的number为0，值越大越排在后面

　　　　　　　　　　（3）flex-grow---设置子元素的放大比例

　　　　　　　　　　　　　　　　取值：number（没有单位），默认值为0，不放大

　　　　　　　　　　　　　　　　比如：子元素的flex-grow的值总和为4，将剩余的空间平分为4分， flex-grow: 1表示占1/4，flex-grow: 3表示占3/4

　　　　　　　　　　（4）flex-shrink---设置子元素缩小比例

　　　　　　　　　　　　取值：number（没有单位），默认值为1，当容器空间不足的情况下，所有自元素默认缩小

　　　　　　　　　　　　不想是子元素缩小，那么设置flex-shrink：0

　　　　　　　　　　（5）flex-basis--设置子项目在主轴上的所占空间

　　　　　　　　　　　　相当于width，设置flex-basis之后width的值将失效

　　　　　　　　　　（6）flex--上面（3）（4）（5）简写

注意：

　　　　align-self:auto 的时候，如果父容器有align-items的属性值的时候，那么align-self:auto就继承父元素align-items的属性值

　　　　那么如果父元素没有align-items属性的时候，align-self:auto的值为align-self:stretch;