前端踩坑（CSS）

在项目开发过程中，遇到了让页面按比例适应大小的问题，然后采用了flex布局方式。Flex 是 Flexible Box 的缩写，意为"弹性布局"，我将它与网格布局结合。

flex: 1=== flex: 1 1 0。flex: 1是flex-grow = 1(定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大,我这里设置为1), flex-shrink(定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，我这里设置为1)和flex-basis(给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小,我这里设置为0)的简写。flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]。如果不修改，则默认值为0 1 auto，后两个属性可选。

.info-row {
    display: flex;
    padding: 0 5px;
    margin-top: 10px;
    .info-col {
      height: 85px;
      flex: 1;
      background-color: #fff;
      border-radius: 8px;
      margin: 0 5px;
    }
  }