flex flexable

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content 
•  1.display: flex;

• .box {
    flex-direction: row | row-reverse | column | column-reverse;// 水平分布垂直分布
  }

• .box{
    flex-wrap: nowrap | wrap | wrap-reverse; //水平轴线换行不换行的问题
  }

• .box {
    justify-content: flex-start | flex-end | center | space-between | space-around; 在主轴上的对齐方式   左对齐右对齐居中对齐

•  

  .box {
    align-items: flex-start | flex-end | center | baseline | stretch;//在纵轴上的对齐方式
  }

   

  .box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;  //多跟轴线的对齐方式
  }