弹性盒

CSS弹性盒子是 CSS3 的一种新的布局模式

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性布局: 核心是使用弹性盒子(弹性盒模型) 以及它里面的弹性元素来实现对标签的排布，对齐的布局处理方式。

设置弹性盒子，默认可以使弹性子元素同行排布并且会自动缩放
弹性子元素宽度保证所有弹性子元素同行排布，如果弹性子元素没有设置高度，
那么默认会拉伸高度于弹性盒子同高。

$\color{orange}{注意：}$ 兼容性：IE11以下不兼容，但是移动端可以放心使用。

display：inline-flex; 行级盒子

display: flex; 块级盒子

一.父元素属性设置（给父级设置）

1、文字排列 flex-direction:

 1、flex-direction:row;                 默认  从左到右
 2、flex-direction:row-reverse;       文字从右向左排列 
 3、flex-direction:column ;           文字从上向下排列 
 4、flex-direction:column-reverse;    文字从下往上排列

2、换行 flex-wrap:

1、 flex-wrap: wrap-reverse;         换行, 从下往上排列
2、 flex-wrap:nowrap;                    不换行 
3、 flex-wrap:wrap;                        换行 
4、 flex-wrap:flex;        可以根据父元素宽度来改变子元素宽度，不想改变，设置换行

$\color{orange}{注意:}$ 弹性盒子可以修改子元素的宽度可以根据自身的宽度修改子元素的宽度
当设置换行以后，子元素的宽度则不能被改变

3、flex-flow: flex-direction 和 flex-wrap 复合型写法

flex-flow:row-reverse wrap;      direction 的参数写在前面  wrap的参数写在后面

4、子元素的对齐方式 justify-content:

  1、 justify-content: space-between;     先两边对齐，然后等间距的分布在容器中 
  2、 justify-content: space-around;      先居中对齐，然后等间距的分布在容器中 
  3、 justify-content: space-evenly;      注重间距，先将所有间距等分，再排列子元素
  4、 justify-content: center;                   居中
  5、 justify-content: flex-end;                右对齐
  6、 justify-content: flex-start;              左对齐

5、align-items: 交叉轴上对齐方式（效果类似于 vertical-align ）

 1、align-items: flex-start;       顶点对齐
 2、align-items: flex-end;         底部对齐
 3、align-items:  baseline;        文字顶端对齐
 4、align-items:  center;          中点对齐
 5、align-items:  stretc;          如果项目未设置高度或设为auto，将占满整个容器的高度。

二.子元素属性(给子元素设置)

1、order: 定义子元素的排列顺序

order:1;
默认值为0  
数值越小  排列越靠前 （可以为负数）

2、flex-grow: 定义子元素的放大倍数

默认为0 即 就算存在间隙  也不放大 
如果所有子元素的值为1   则所有子元素 等分间隙 
如果 其中一个子元素为 2  其他为1  则 2的那个子元素 比其他元素多放大一倍 
这里说的一倍 不是子元素原本宽度的一倍 而是将父元素中的间隙平等均分 其所分到的间隙的宽度的一倍

3、flex-shrink: 定义元素缩放比例

默认为1 可以根据父元素的宽度缩放 
当值为0 时 则根据父元素的宽度改变而不缩放

4、flex-basis: 默认初识值

flex-basis: 80px;          默认初识长度为80px

5、align-self: 对齐方式

允许 指定的 项目 可以与其他项目 有不同的对齐方式 
可以覆盖其父元素的 align-items 

参数值：
1、auto         元素 继承其父元素 align-items  的对齐方式 
2、stretch      元素被拉伸以适应父元素 
3、flex-start   元素位于容器开头 
4、flex-end     元素位于容器结尾 
5、center       元素位于容器的 中间的位置 
6、baseline     元素位于容器基准线上