flex布局常用代码以及圣杯布局

flex用习惯了，看见浮动真的是...应该迟早会被淘汰吧，总是抱有这样的想法。因为flex布局相比浮动更具有简单性和灵活性。以下举例说明flex的使用以及易用性

首先总结一下使用flex常用的代码：

     /* 这个是一定要加给父盒子的 */
      display: flex;

            // x轴
    /* 默认值, 起点开始依次排列 */
    justify-content: flex-start;
    /* 终点开始依次排列 */
    justify-content: flex-end;
    /* 沿主轴居中排列 */
    justify-content: center;
    /* 弹性盒子沿主轴均匀排列,  空白间距均分在弹性盒子两侧 */
    justify-content: space-around;
    /* 弹性盒子沿主轴均匀排列,  空白间距均分在相邻盒子之间  重点*/
    justify-content: space-between;
    /* 弹性盒子沿主轴均匀排列,  弹性盒子与容器之间间距相等 */
    justify-content: space-evenly;

  ```
  
         //  y轴[单行]
  /* 起点开始依次排列 */
  align-items: flex-start;
  /* 终点开始依次排列 */
  align-items: flex-end;
  /* 沿侧轴居中排列 */
  align-items: center;
  /* 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 */
  align-items: stretch;

            //  y轴[多行]
     /* 沿主轴居中排列 */
    align-content: center;
    /* 默认值, 起点开始依次排列 */
    align-content: flex-start;
    /* 终点开始依次排列 */
    align-content: flex-end;
    /* 弹性盒子沿主轴均匀排列,  空白间距均分在弹性盒子两侧 */
    align-content: space-around;
    /* 弹性盒子沿主轴均匀排列,  空白间距均分在相邻盒子之间 */
    align-content: space-between;

          // 修改主轴方向【主轴变为y轴，侧轴变为x轴】
  flex-direction: column;   //y轴为主轴

            //弹性盒子换行
    【因为给父亲添加了 `display: flex;` 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。】
    flex-wrap: wrap;

伸缩比
把父盒子分为若干份数，每个子盒子各占几份。
flex:n //n为几分

比如圣杯布局：

两边盒子宽度固定，中间粉色的设为flex：1，
中间盒子可弹性伸缩宽度，随着大盒子的宽度变化而变化