flex布局又称作弹性盒布局，其由两部分组成，首先是弹性盒【flex-container】，其次是弹性子元素【flex-items】

1. flex-container常见属性：

　　1. flex-direction: row | row-reverse | column | column-reverse 规定了弹性盒子元素的排列顺序

　　2. flex-wrap: nowrap | wrap | wrap-reverse 默认为nowrap在一行显示所有弹性子元素 常搭配align-content使用，规定了弹性子元素超出弹性盒长度时是否换行显示弹性子元素

　　3. justify-content：flex-start | flex-end | center | space-around | space-between 规定了弹性子元素的位置

　　4. align-items：flex-start | flex-end | center | baseline | stretch 规定了弹性子元素在副轴方向的排列位置

　　5. align-content：flex-start | flex-end | center | space-around | space-between 规定了弹性容器内各个行的副轴元素排列方式【注意与align-items区分】

　　6. flex-flow：是flex-wrap以及flex-direction的复合属性

2. flex-items常见属性：

　　1. order：属性值为Number，数字越小，排序越靠前

　　2. flex：【flex-grow】|【flex-shrink】|【flex-basis】分别为弹性子元素放大比率，缩小比率，以及初始长度

　　　　flex-basis常见可以设置为Number，表示占据多少份，也可以设置为百分比.

　　flex-shrink: 设置一个弹性子元素的收缩比率
　　说明：假设所有弹性子元素flex-shrink为1 单独设置一个子元素flex-shrink为3，那么此子元素是其他子元素的三分之一
　　flex-grow: 设置一个弹性子元素的放大比率
　　flex-basis: 设置一个弹性子元素的大小

　　3. margin 可以设置完美居中，auto直接可实现水平垂直居中

　　4. align-self：设置自身在侧轴的位置

 3. flex常见布局：

　　1. 圣杯布局：分为三行，首行为header，中间又分为left、center、right，末尾为footer

  <div class="holy">
    <header></header>
    <div class="body">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>
    <footer></footer>
  </div>

  <style>
    .holy {
      display: flex;
      height: 100vh;
      flex-direction: column;
    }
    header {
      background-color: pink;
      height: 20vh;
      flex: 1;
    }
    .body {
      display: flex;
      flex: 1;
    }
    .left {
      background-color: skyblue;
      flex: 0 0 20%;
    }
    .center {
      background-color: red;
      flex: 0 0 50%;
    }
    .right {
      background-color: gold;
      flex: 0 0 30%;
    }
    footer {
      background-color: green;
      flex: 1;
    }
  </style>

　　2. 基本网格布局

　　3. 百分比布局

　　4. 两边固定，中间自适应布局【以下代码摘自https://www.ruanyifeng.com/blog/2015/07/flex-examples.html】

  <div class="InputAddOn">
    <span class="InputAddOn-item">...</span>
    <input class="InputAddOn-field">
    <button class="InputAddOn-item">...</button>
  </div>

  <style>
    .InputAddOn {
      width: 200px;
      display: flex;
    }

    .InputAddOn-field {
      flex: 1;
    }
  </style>

　　5. 骰子布局

　　6. 悬挂布局：左边是图片，右边是文字

  <div class="box">
    <img src="..." alt="">
    <p>...</p>
  </div>

  <style>
    .box {
      display: flex;
      align-items: flex-start;
    }
    p {
      flex: 1;
    }
  </style>

　　7. 流式布局：flex多行显示，且一行未满时从左到右依次填充