flex是什么？

【问】flex是什么？

【答】flex是响应式布局常用方案，且在移动端兼容良好，用它可非常简洁地实现响应式、垂直居中等，而这些需求用传统方案，如float、position等实现起来都非常繁杂。

【扩展1：flex频次最高的实践如下】

    .box {
        width: 300px;
        height: 300px;

        display: flex;
        /* 主轴方向: row主轴从左到右默认 / column主轴从上到下; */
        flex-direction: row; 

        /* 主轴如何换行: nowrap不换行，默认 / wrap换行到第二行; */
        flex-wrap: nowrap;

        /* 子项目在主轴方向对齐方式: flex-start自左向右，默认 / center居中 / space-between两侧顶格对齐  / space-around两侧一半于子元素对齐; */
        justify-content: space-between;

        /* 子项目在交叉轴方向对齐方式：stretch，垂直拉伸填满 / center垂直居中 */
        /* align-items: center; */
    }

    .box div {
        width: 50px;
        background: red;

        /* 空间有剩余时，该子项目放大方式：0不放大，默认 */
        /* flex-grow: 0; */
        
        /* 空间不足时，该子项目缩小方式：1将缩小，默认 / 0不缩小 */
        /* flex-shrink: 0; */
    }
    .box4 {
        /* 重点!!! 简写flex是flex-grow, flex-shrink, flex-basis的简写, 如下代码即可实现该子项目填充剩余空间*/
        flex: auto;
    }

  <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
  </div>

参考1：Flex 布局教程 阮一峰