flex - 弹性布局
在实在的利用场景中，通常会遇到各种各样不同尺⼨和分辨率的设施，为了能在所有这些设施上失常的布局咱们的利用界面，就须要响应式的界⾯设计形式来满⾜这种简单的布局需要。
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： 元素的高度会被拉伸到最大（不给高度时, 才拉伸）。flex-wrap属性管制flex容器是单行或者多行,默认不换行
nowrap： 不换行（默认），如果宽度溢出，会压缩子盒子的宽度。wrap： 当宽度不够的时候，会换行。align-content用来设置多行的flex容器的排列形式
flex-start： 各行向侧轴的起始地位重叠。 flex-end： 各行向弹性盒容器的完结地位重叠。center： 各行向弹性盒容器的两头地位重叠。space-around： 各行在侧轴中均匀散布。 space-between： 第一行贴上边，最初一个行贴下边,其余行在弹性盒容器中均匀散布。 stretch：拉伸，不设置高度的状况下。