CSS中弹性盒布局(flex)

一、弹性盒(flex)

flex（弹性盒/伸缩盒）

是CSS中又一种布局手段，他主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性，让元素可以根据页面大小改变而改变
弹性容器
要使用弹性盒，必须先将一个元素设置为弹性容器
我们可以通过display来设置弹性容器
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内弹性容器

二、弹性元素

弹性元素
弹性容器的直接子元素是弹性元素（弹性项）
一个元素可以同时是弹性容器和弹性元素
弹性元素可以同时是弹性容器

弹性元素的样式：

flex-grow 指定弹性元素的伸展系数：
flex-grow: 1;
flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大,如果值为1的话，平分剩余空间
父元素有多余空间时，子元素如何伸展
父元素的剩余空间，会按照比例进行分配
flex-shrink指定弹性元素的收缩系数：
flex-shrink: 0;
flex-shrink 定义了项目的缩小比例