弹性布局：
   1、专业术语
     1.容器(父div)  display:flex
     2.项目(子div)   容器的儿子
     3.主轴  子元素排列方向
     4.侧轴	

容器（父元素）的属性
  1、display:flex  
  2、设置主轴的方向（水平 垂直）
     flex-direction:row(默认 水平)|column(垂直)

  3、设置项目是否换行 
      flex-wrap:nowrap(默认 不换行)|wrap(换行)
	不换行时，如果子元素的宽度之和超过了父元素的总宽度，此时，自动调整子元素宽度（按照父元素宽度均分）
	换行，按照子元素的实际宽度排列，一行放不下就换行显示
  4、设置项目在主轴的对齐方式
     justify-content:center | space-between(两侧靠齐) |space-around(环绕)
    
  5、设置项目在侧轴的对齐方式
     align-items：center  flex-start  flex-end

项目（子元素）的属性
  1、order:设置项目的排列顺序 数字越小 越靠前
  2、flex:占比 默认是0
	设置后边距设置及主轴排序方式会失效，默认按照比例均分父元素的宽度
  3、align-self:自己在侧轴的对齐方式  center flex-start  flex-end