ife_task10--弹性盒子

用到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布局