如題，這些天在github上找了個施展專案練手，跟著些程式碼，但是很快就出現了問題。

一、問題描述

使用flex佈局，第一個元素樣式發生錯誤，如圖：

強迫症患者表示傷不起！

程式碼如下：

HTML：

<div class="type-bar">

<div v-for="(cate,index) in category" :key="index">

<img v-lazy="cate.image" width="90%">

<span>{{cate.mallCategoryName}}</span>

</div>

</div>
 

這個是vue專案，不會的小夥伴用幾張本地圖代替就可以了。

CSS：

.type-bar{
       background-color: #fff;
       margin:0 .3rem .3rem .3rem;
       border-radius: .3rem;
       font-size: 14px;
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
   }
   .type-bar div{
       padding: .3rem;
       font-size: .75rem;
       text-align: center;
   }
 

css中用了rem佈局，這個很簡單，大家換成px也行，想要了解rem的，百度一下就OK了。

二、解決方案

老實說我也沒明白是什麼原理，本身也是前端菜鳥，百度了一下，最終找到了解決方案，如下

在flex的子元素中新增

flex-grow: 1;
flex-basis: 0%;

即可！

修改後HTML程式碼不變，只是在CSS中加入兩行程式碼即可！

最後CSS程式碼如下：

.type-bar{
       background-color: #fff;
       margin:0 .3rem .3rem .3rem;
       border-radius: .3rem;
       font-size: 14px;
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
   }
   .type-bar div{
       padding: .3rem;
       font-size: .75rem;
       text-align: center;
       flex-grow: 1;
       flex-basis: 0%;
   }
 

最後佈局終於正確了，治好了我的強迫症，如下：

問題解決！

我也是個前端菜鳥，所以也不知道解決方案到底是否正確，但簡單的測試後，發現沒有問題，希望可以幫助到更多的小夥伴，如果大家有更好的解決方案，也可以給我留言！