CSS弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
: 给父级设置
display：inline-flex; 行级
display: flex; 块级
(1)、父元素属性设置
1、文字排列 flex-direction
1、flex-direction:row; //默认
2、flex-direction:row-reverse; //文字从右向左排列
3、flex-direction:column ; //文字从上向下排列
4、flex-direction:column-reverse; //文字从下往上排列
5、flex-direction:column-reverse;
2、换行 flex-wrap
1、nowrap //默认 不换行
2、wrap //换行 从上往下换行
3、wrap-reverse // 从下往上换行
3、flex-flow flex-direction 和 flex-wrap 复合型写法
flex-flow:row-reverse wrap; //direction 的参数写在前面 wrap的参数写在后面
4、justify-content 子元素的对齐方式
1、flex-strart //默认左对齐
2、flex-end //右对齐
3、center //居中
4、space-between //两端对齐，项目之间的间隔都相等。
5、space-around //先居中对齐 然后在等间距的分布在容器之中
6、space-evenly //注重间距 先将所有的间隙等分开 在排列子元素
5、align-items 交叉轴上对齐方式 （效果类似于 vertical-align ）
1、flex-start //顶点对齐
2、flex-end //底部对齐
3、center //中点对齐
4、baseline //文字顶点对齐
5、stretch //如果项目未设置高度或设为auto，将占满整个容器的高度。
效果类似于vertical-align
(2)、子元素属性
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、flex 是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。书写时注意书写顺序。
//让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
flex:1;
6、align-self 对齐方式
允许 指定的 项目 可以与其他项目 有不同的对齐方式
可以覆盖其父元素的 align-items
参数值：
1、auto //元素 继承其父元素 align-items 的对齐方式
2、stretch //元素被拉伸以适应父元素
3、flex-start //元素位于容器开头
4、flex-end //元素位于容器结尾
5、center //元素位于容器的 中间的位置
6、baseline //元素位于容器基准线上
