弹性盒也叫伸缩布局盒模型
它是css3引入的一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更便利于开发。
开启：display：flex；
二、弹性盒属性
（1)
伸缩流方向 flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向
row：从左向右
row-reverse：与row相反
column：从上到下
column-reverse：与column相反
（2)
换行 flex-wrap
nowrap 不换行 默认值，不管超出还是不超出都不会换行
wrap 换行 一旦伸缩项目超出伸缩容器，那么就会换行
wrap-reverse 换行反向 主轴水平时，上下反向，主轴垂直时，左右反向flex-flow：换行 伸缩方向; 两个值同时定义或者单独定义都生效，不分先后顺序
（3)
伸缩流方向属性与换行属性缩写形式 flex-flow
（4)
主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式
flex-start：伸缩项目向一行的起始位置靠齐
flex-end：伸缩项目向一行的结束位置靠齐
center：伸缩项目向一行的中间位置靠齐
space-between：伸缩项目会平均的分布在行里
space-around：伸缩项目会平均的分布在行里，两端保留一半的空间
space-evenly：项目均匀分布，所有项目之间及项目与边框之间距离相等
（5)
侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式
flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边
flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边
center：伸缩项目的外边距盒 在该行的侧轴上居中放置baseline：伸缩项目根据伸缩项目的基线对齐stretch：伸缩项目拉伸填充整个伸缩容器
（6)
堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式； 往往要与换行同时应用，没有换行就不存在多行的情况
flex-start：各行向伸缩容器的起点位置堆叠；（没有行距）
flex-end：各行向伸缩容器的结束位置堆叠；（底部对其没有行距）
center：各行向伸缩容器的中间位置堆叠；（居中没有行距）
space-between：各行在伸缩容器中平均分布；（两端对齐，中间自动分配）
space-around：各行在伸缩容器中平均分布，两端保留一半的空间；（自动分配距离）
（7)
align-self（加在子元素上）：主要用来设置单独伸缩项目在侧轴的对齐方式。注意点：align-self可以覆盖align-items
flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；（元素位于容器的开头）
flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；（元素位于容器的结尾）
center：伸缩项目的外边距盒 在该行的侧轴上居中放置；（元素位于容器的中间）
stretch：伸缩项目拉伸填充整个伸缩容器。（元素被拉伸以适应容器）
（8)
显示顺序 order （加在子元素上）默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序
a、不定义order的伸缩项目会排到前面
b、order：1； 排第一 order：2； 排第二
（9)
flex（设置在子元素上） 作用：可以让元素自动占用容器的可用空间，等比划分
flex:1;（一份）
flex:2;（两份）
…
（10)
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
（11)
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
（12)
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。不常用，还在不断变化中。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto