用到CSS3属性，display:flex 该属性非正式标准，但各大浏览器最新版本都支持
-
flex-wrap：指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。
语法格式 flex:nowrap | wrap | wrap-reverse -
nowrap:flex 的元素被摆放到到一行，这可能导致溢出 flex 容器
-
wrap:flex 元素 被打断到多个行中
-
wrap-reverse和 wrap 的表现一样但是 cross-start 和 cross-end 交替排列。
-
justify-content:
-
align-items 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐
-
一个很重要的属性
order:int //可以给box安排顺序，可以为负数
让第四个蓝块可以显示在第一个可以让order为-1，默认是1 -
align-content： 这个属性主要用来调准伸缩行在伸缩容器里的对齐方式
flex布局与bootstrap布局的异同
flex布局在不支持ie11以下的浏览器
bootstrap4已经开始用flex布局了，而不是float布局