弹性容器

弹性盒(flex)是css中的又一种布局手段，flex可使元素具有弹性，让元素可以随页面的改变而该改变
-弹性容器要使用弹性盒，必须先将元素设置为弹性容器，我们通过display:flex来设置成弹性容器
1.flex-direction：用于指定容器中弹性元素的排列方式
·row-默认值，弹性盒中的弹性元素从左向右排列；
·row-revere-从右向左排列；
·column-纵向从上向下排列；
·column·revere-纵向从下向上排列；
·主轴-弹性元素的排列方向成为主轴；
·侧轴-与主轴垂直的方向为侧轴；
2.flex-wrap:设置弹性元素是否自动换行
·nowrap-默认值，不换行；
·wrap-沿辅轴方向自动换行；
·wrap-reverse-沿辅轴反方向换行；
3.flex-flow：wrap direction简写属性
4.justify-content：如何分布主轴上的空白空间
·flex-start-沿主轴起边排列
·flex-end-沿终边排列
·center-元素居中排列
·space-around-空白分布在元素两侧
·space-evently-分布到一侧
·space-between-均匀分布到中间
5.align-items：如何分布辅轴上的空白空间
几乎同水平方向的特点，不在此赘述
-弹性元素:弹性容器的子元素是弹性元素，一个元素可以同时是弹性容器和弹性元素
1.flex-grow：指定弹性元素的伸展系数，当父元素有多余空间时，子元素如何伸展，根据子元素设置的比例来分配多余空间
2.flex-shrink：指定压缩系数，当没有指定压缩系数的时候，如果弹性元素大小大于弹性容器，会使弹性元素平均分配弹性空间
3.flex的简写属性：增长，缩减，基础，三者顺序不能改变