解決移動端水平滾動使用justify-content顯示不全問題

今天做移動端頁面遇到一個坑，我需要實現的效果是這樣的

由於選項的個數是不一定的，如果很少的話不會有橫向滾動，是需要居中的

自然而然的是這麼寫的

      .father {
            display:flex;
            justify-content: center;
            overflow-x: auto;
            margin: 0 30px;
             .child {
               display: flex;
               flex-direction: column;
               align-items: center;     
             }
       }

結果會發現第一個元素是展示不全的，

如果把father裏的justify-content: center;換成justify-content: space-between;或者justify-content: left; 是可以的，但是當只展示兩三個選項時就會間距過大。而我們需要選項過少的時候是center效果，多了則顯示全並能滾動。
想過對第一個選項的css單獨處理，但是還要判斷選項個數，其實和自己試出來的頁面能展示多少個選項不滾動沒區別。不想寫js和複雜的css，嘗試了很多次，最終發現在father外面再包一層div給他justify-content: center;就可以了，搜了半天也沒搜到答案，真是個坑，
注意父元素不能再加justify-content: center;代碼如下,

     <div v-if="list.length > 0" class="type-scroll">
      <div class="father" v-if="activeLeft">
        <div
          class="child"
          v-for="(item, index) in list.slice(0, 10)"
          :key="index"
          @click="lookImg(item, index)"
        >
          <img
            v-if="item.icon"
            class="img"
            :class="{ 'icon-active': iconIndex === index }"
            :src="getSrc(item.icon)"
            alt
          />
          <div
            v-if="item.lang"
            class="name"
            :class="{ 'name-active': iconIndex === index }"
          >
            {{ $t(item.lang) }}
          </div>
        </div>
      </div>
     </div>  

css如下

      .type-scroll {
        display: flex; // 關鍵就是這兩行了
        justify-content: center; // 關鍵就是這兩行了
            .father {
                 display: flex;
                overflow-x: auto;
                margin: 0 vw(30);
                  .child {
                     display: flex;
                     flex-direction: column;
                     align-items: center;    
                  }
            }
        }