Flex Layout

弹性盒子布局，配合网格布局应该会成为未来的基础布局方式，当然原始的DIV+CSS还是一样OK
现在还是定义一个flex容器和它的子集item

  <div class="flex">
    <div class="item"></div>
  </div>

父元素的属性

display: flex块状 | inline-flex 容器为行内。为所有子元素提供flex上下文。
flex-direction: 确立主轴，定义item在flex的排布方向
flex-wrap: 是否允许换行，一般flex在单行
flex-flow: 是flex-direction和flex-wrap的缩写
justify-content: item的间距选项
align-items: 交叉轴上的排布对齐
align-content: 交叉轴有剩余空间时可以设置分配剩余空间，类似justify-content对齐单个item

  .flex {
    display: flex;

    //上到下，下到上，右到左，左到右
    flex-directlion: row | row-reverse | column | column-reverse;

    //不换行，换行，上到下多行，下到上多行
    flex-wrap: nowrap | wrap | wrap-reverse;

    //缩写
    flex-flow: flex-direction || flex-wrap
    
    //主轴开始，主轴结束开始，居中，两端对齐，左右端各1中间各2，全部1
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    
    // 交叉轴开始，结束，居中，文字基线对齐，拉伸（如果flex有width...首先用这些）
    align-items: flex-start | flex-end | center | baseline | stretch;

    // 多行在flex开始排布，结束，中间，均匀左右，全部均匀，拉伸。
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  }

item的属性

order: 控制顺序
flex-grow: 如果所有都是1，平均分配，有一个是2，大小是其他的2倍。 P.s.比如两个1一个2，那么2的那个就占了1/2，其他每个1/4。
flex-shrink: 和grow相反，可以收缩多少。
flex-basis: 分配剩余空间前flex默认大小，可以设置%,rem,auto，未来还可以设置content。
flex: 这个是flex-grow, flex-shrink, flex-basis三个的缩写，2、3是可选的，默认0 1 auto;

  .item {
      order: number;
      flex-grow: number;
      flex-shrink: number;
      
      flex: 0 1 auto;
  }

一些栗子

    //一个完全居中的例子
    .flex {
      display: flex;
      height: 300px;
    }  
    .item {
      width: 100px; height:100px;
      //自动分配~
      margin: auto;
    }

摘自HTML中文网