伸缩布局中，flex: 0 0 auto

介绍
在页面开发当中，经常使用到 flex 伸缩布局；很多人经常使用到 flex 的这一属性，flex： 0 0 auto 或者 flex： 0 1 auto 或者 flex： 1 0 auto 或者 flex： 0 0 10% ………… 但是大多数人都不太清楚这一属性的含义，下面主要介绍一下，这一属性的使用方式，以及含义：

定义
如上面的 flex： 1 0 auto ， 这一属性，flex后面跟了三个值，这三个值实际上是flex-grow ，flex-shrink，flex-basis 三个属性的缩写。有关于这三个值的介绍主要如下：

flex-grow
属性用于设置或检索弹性盒子的扩展比率（即 放大比例）

默认值为 0 ， 当项目有剩余空间时，也默认不会放大
若设置值为 1 ， 则代表当项目有剩余的空间时，会自动放大占有比例
若设置值为 n， 则代表放大的比例是 flex-grow 为 1 的 n倍
flex-shrink：
属性指定了 flex 元素的收缩规则（即 缩小比例）

默认值为 1 ， 当项目空间不足时，会默认缩小
若设置值为 0 ，则代表当项目空间不足时，项目默认不会缩小
如果所有的项目的 flex-shrink 都设置为1； 则代表当项目空间不足时，它们缩小的比例都一致
flex-shrink 设置为 n ， 则代表当项目空间不足时，缩小的比例是 flex-shrink 为 1 的 n倍
flex-basis：
属性用于设置或检索弹性盒伸缩基准值（即 项目占据的主轴的空间）

默认值, auto， 长度等于灵活项目的长度
如果该项目未指定长度，则长度将根据内容决定
设置后，将根据设定的值占据固定的空间长度
常使用到的属性解释
flex: 1：：也就是 flex-grow: 1， 经常用于自适应布局；也就是设置父盒子为伸缩布局（display:flex），给子盒子设置flex: 1；这样做，内容区就会自动放大占满空间
flex: 0 0 auto： 等同于 flex: none，默认元素有剩余空间也不放大，空间不足时也不能缩小，长度等于灵活项目的长度
flex: 0 1 auto：默认有剩余空间也不放大，空间不足时可以缩小，长度等于灵活项目的长度
flex: 1 0 auto：默认有剩余空间可以放大，空间不足时不缩小，长度等于灵活项目的长度
flex: 1 1 auto：等同于 flex: auto ， 默认根据 width 和 height 属性调整元素的大小，
flex: 0 0 10%：默认元素有剩余空间也不放大，空间不足时也不能缩小，长度占据当前项目总空间的10%

项目案例：
当一页有10个box， 我设计的是：共两行，每行五个盒子；

 <ul class="Project-list">
          <li
            class="filter-nav"
            v-for="(item, index) in projectList"
            :key="index"
            
            @click="ChooseTemplate(index, item)"
          >
            <div class="box1" :class="{ active: clickIndex == index }">
              <img
                :src="srcEnvTemplate(item.fileKey)"
                alt=""
              />
              <div class="bg-box">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </li>
        </ul>

 li {
      list-style: none;
      width: 178px;
      height: 317px;
      // margin-right: 10px;
      border-radius: 4px;
      overflow: hidden;
      flex: 0 0 16.6%;
      margin-bottom: 20px;
      .box1 {
        width: 178px;
      }
      img {
        height: 277px;
        width: 100%;
        vertical-align: middle;
      }
      }

注意：li里面的内容，需要裹上一层div。给这层div设置宽度；

原文链接：https://blog.csdn.net/Shivy_/article/details/122361132