弹性盒子

什么是弹性盒子？
弹性盒子是 CSS3 的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
伸缩容器：设置为display:flex或display:inline-flex的元素称为伸缩容器。
伸缩项目：伸缩容器的子元素称为伸缩项目
注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效；弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行
兼容性网站
https://caniuse.com/#home
浮动布局做多列和flex的区别
浮动会换行
flex默认不换行，默认挤压子元素的宽度，挤压最小的宽度就是子元素里面内容撑开的宽度，如果父元素的内容小于子元素内容撑开的和，那么子元素就会溢出。
CSS3 弹性盒子常用属性
弹性子元素属性

order属性
默认为0，从小到大排列，可以为负值
ordee=1时

ordee=-1时

flex-grow属性
默认为0；
设置不同值按照不同的比例增加


flex-shrink属性
只有宽度不够是有用，默认为1，
0为不收缩，越大收缩越严重