flex布局基础

什么是弹性布局：

        flex布局又称弹性布局，是H5新出的布局方式，替代传统的float布局。

开启弹性布局:设置display: flex。

        1.开启布局方式要对父元素设置，让子元素按照布局方式排列。<br />            2.设置flex布局之后，会使其他的垂直对齐方式失效。元素的float，clear和 vertical-align属性将会失效。<br />            3.设置flex布局之后，子元素默认按照从左至右的顺序排列，且元素之间没有间隙。<br />            4.设置flex布局之后，没有设置换行，所有子项目会在一行显示不会自动折行。 

使用规则：

        1.弹性布局中，把开启弹性布局的元素称之为“容器”，把弹性布局中的所有子元素称之为“项目”。<br />            2.弹性布局的容器有两根轴，主轴和交叉轴，主轴的方向默认是水平从左至右，交叉轴与主轴垂直，默认方向是垂直从上至下。<br />            3.弹性布局中的项目的尺寸，默认情况下(不设置宽高)，主轴方向的尺寸是内容的大小，交叉轴方向的尺寸尽量铺满整个容器。

/ 开启弹性布局/

display: flex;

             改变主轴方向<br />                    row：默认值，主轴水平方向，从左至右。<br />                    row-reverse：主轴水平方向，从右至左。<br />                    column:主轴垂直方向，从上至下。<br />                    column-reverse：主轴垂直方向，从下至上。 

flex-direction: column-reverse;

设置项目的伸缩基准(占主轴方向的多大空间) 。
当我们不设置flex-basis的时候，元素会根据width/height渲染宽度或高度，没有width/height，元素就根据自身宽度或高度渲染。
如果设置了flex-basis，width/height就没用了。max-width和min-width会限制flex-basis。

 flex-basis: 20%;

order:默认值0，支持负数，改变弹性布局中的项目的出现顺序，数值小的在前面