给一个元素设置伸缩属性，让他具有弹性盒子的某些特性，便于我们的认识。
display:flex; 设置弹性盒子
- 第一个属性：flex-direction: row(默认值) | column | row-reverse | column-reverse;
- 第二个属性：justify-content: flex-start(默认值) | flex-end | center | space-around | space-between;这个属性是设置弹性盒子里的弹性子项在主轴上的对其方式。
- 第三个属性：align-items:flex-start | flex-end | center | stretch(默认值) | baseline;这个属性是设置弹性子项在交叉轴上的对其方式。
- 第四个属性：flex-wrap:wrap | no-wrap(默认值) | wrap-reverse; 设置弹性子项在主轴上是否换行。
- 第五个属性：align-content: flex-start | flex-end | center | space-between | space-around | stretch | baseline;这个属性只在弹性子项大于一行时才设置生效。
- 复合写法：flex-flow:flex-direction flex-wrap;
弹性子项的属性设置
- order:整数设置，默认为0，可以对弹性子项进行前后顺序排列。
- flex-grow:剩余空间，默认0。伸缩元素的放大比例。
- flex-shrink:默认1。伸缩元素的缩小比例。当弹性子项的总宽度大于父级弹性盒子的总宽度，所有的弹性子项会默认平摊超出的尺寸，所以不会超出弹性盒子外界。
- flex-basis:设置弹性子项的width尺寸，默认auto;
- align-self:对单个弹性子项进行交叉轴的对其方式。
- 复合写法: flex:flex-grow flex-shrink | flex-basis;