柔性箱子最後一個項目取整個容器的寬度。我該如何解決這個問題？

Question

最後一行項目佔用全部寬度，但是我希望最後一行項目與所有其他項目具有相同的寬度。 我附上了一張屏幕截圖，說明我的問題。

Flexbox是可行的，或者我必須使用簡單的CSS來滿足我的要求嗎？或者我應該使用顯示錶和表格單元屬性？

在此先感謝！

* { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 1170px 
 
} 
 

 
.listingResult { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: flex; 
 
    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
    display: -webkit-box; 
 
    /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    display: -moz-box; 
 
    /* OLD - Firefox 19- (buggy but mostly works) */ 
 
    display: -ms-flexbox; 
 
    /* TWEENER - IE 10 */ 
 
    display: -webkit-flex; 
 
    /* NEW - Chrome */ 
 
    -webkit-flex-wrap: wrap; 
 
    /* Safari 6.1+ */ 
 
    flex-wrap: wrap; 
 
} 
 

 
.listingResult>li { 
 
    width: 33.33%; 
 
    -webkit-box-flex: 1 33.33%; 
 
    /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    -moz-box-flex: 1 .33%; 
 
    /* OLD - Firefox 19- */ 
 
    -webkit-flex: 1 33.33%; 
 
    /* Chrome */ 
 
    -ms-flex: 1 33.33%; 
 
    /* IE 10 */ 
 
    flex: 1 33.33%; 
 
    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
    margin: 0 0 30px; 
 
    padding: 10px; 
 
    display: flex; 
 
    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
    display: -webkit-box; 
 
    /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    display: -moz-box; 
 
    /* OLD - Firefox 19- (buggy but mostly works) */ 
 
    display: -ms-flexbox; 
 
    /* TWEENER - IE 10 */ 
 
    display: -webkit-flex; 
 
    /* NEW - Chrome */ 
 
    -webkit-flex-wrap: wrap; 
 
    /* Safari 6.1+ */ 
 
    flex-wrap: wrap; 
 
} 
 

 
.listingResult>li .listingResultPic img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.listingResult>li .listingResultInfo { 
 
    margin-top: auto; 
 
}

<div class="container"> 
 
    <ul class="listingResult"> 
 
    <li> 
 
     <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div> 
 
     <div class="listingResultInfo"> 
 
     <h4 class="price">$12,000</h4> 
 
     <p class="address info">Co Rd AFChampion, MI 49814</p> 
 
     <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1103145">1103145</a></p> 
 
     <ul class="basicInfo"> 
 
      <li class="bed">3</li> 
 
      <li class="bath">1</li> 
 
      <li class="area">1103 sqft</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div> 
 
     <div class="listingResultInfo"> 
 
     <h4 class="price">$12,500</h4> 
 
     <p class="address info">GenevaIronwood, MI 49938</p> 
 
     <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1100143">1100143</a></p> 
 
     <ul class="basicInfo"> 
 
      <li class="bed">3</li> 
 
      <li class="bath">2</li> 
 
      <li class="area">1717 sqft</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div> 
 
     <div class="listingResultInfo"> 
 
     <h4 class="price">$12,500</h4> 
 
     <p class="address info">SaginawNorway, MI 49870</p> 
 
     <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1104097">1104097</a></p> 
 
     <ul class="basicInfo"> 
 
      <li class="bed">3</li> 
 
      <li class="bath">1</li> 
 
      <li class="area">828 sqft</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div> 
 
     <div class="listingResultInfo"> 
 
     <h4 class="price">$12,900</h4> 
 
     <p class="address info">NorthWakefield, MI 49968</p> 
 
     <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1101426">1101426</a></p> 
 
     <ul class="basicInfo"> 
 
      <li class="bed">3</li> 
 
      <li class="bath">2</li> 
 
      <li class="area">935 sqft</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

設置flex-增長爲0更改flex: 1 33.33%到flex: 0 1 33.33%列表元素上。

這是你的工作代碼：https://jsfiddle.net/ecgx58ep/2/

請參閱此鏈接的詳細信息，柔性成長：https://developer.mozilla.org/en/docs/Web/CSS/flex-grow

Answer 2

您可以更改flex: 1 33.33%到flex: 0 1 33.33%。現在flex-grow將是禁用和最後一行將表現。

由於您已在flex: 0 1 33.33%中設置flex-basis 33.33％，因此您可以刪除width: 33.33%。

請參見下面的演示：

* { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 1170px 
 
} 
 

 
.listingResult { 
 
    list-style: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: flex; 
 
    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
    display: -webkit-box; 
 
    /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    display: -moz-box; 
 
    /* OLD - Firefox 19- (buggy but mostly works) */ 
 
    display: -ms-flexbox; 
 
    /* TWEENER - IE 10 */ 
 
    display: -webkit-flex; 
 
    /* NEW - Chrome */ 
 
    -webkit-flex-wrap: wrap; 
 
    /* Safari 6.1+ */ 
 
    flex-wrap: wrap; 
 
} 
 

 
.listingResult>li { 
 
    -webkit-box-flex: 0 1 33.33%; 
 
    /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    -moz-box-flex: 0 1 .33%; 
 
    /* OLD - Firefox 19- */ 
 
    -webkit-flex: 0 1 33.33%; 
 
    /* Chrome */ 
 
    -ms-flex: 0 1 33.33%; 
 
    /* IE 10 */ 
 
    flex: 0 1 33.33%; 
 
    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
    margin: 0 0 30px; 
 
    padding: 10px; 
 
    display: flex; 
 
    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
    display: -webkit-box; 
 
    /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    display: -moz-box; 
 
    /* OLD - Firefox 19- (buggy but mostly works) */ 
 
    display: -ms-flexbox; 
 
    /* TWEENER - IE 10 */ 
 
    display: -webkit-flex; 
 
    /* NEW - Chrome */ 
 
    -webkit-flex-wrap: wrap; 
 
    /* Safari 6.1+ */ 
 
    flex-wrap: wrap; 
 
} 
 

 
.listingResult>li .listingResultPic img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
.listingResult>li .listingResultInfo { 
 
    margin-top: auto; 
 
}

<div class="container"> 
 
    <ul class="listingResult"> 
 
    <li> 
 
     <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div> 
 
     <div class="listingResultInfo"> 
 
     <h4 class="price">$12,000</h4> 
 
     <p class="address info">Co Rd AFChampion, MI 49814</p> 
 
     <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1103145">1103145</a></p> 
 
     <ul class="basicInfo"> 
 
      <li class="bed">3</li> 
 
      <li class="bath">1</li> 
 
      <li class="area">1103 sqft</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div> 
 
     <div class="listingResultInfo"> 
 
     <h4 class="price">$12,500</h4> 
 
     <p class="address info">GenevaIronwood, MI 49938</p> 
 
     <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1100143">1100143</a></p> 
 
     <ul class="basicInfo"> 
 
      <li class="bed">3</li> 
 
      <li class="bath">2</li> 
 
      <li class="area">1717 sqft</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div> 
 
     <div class="listingResultInfo"> 
 
     <h4 class="price">$12,500</h4> 
 
     <p class="address info">SaginawNorway, MI 49870</p> 
 
     <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1104097">1104097</a></p> 
 
     <ul class="basicInfo"> 
 
      <li class="bed">3</li> 
 
      <li class="bath">1</li> 
 
      <li class="area">828 sqft</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="listingResultPic"><img src="http://rets.906mls.com/mls_photos/1102784_1.JPG" alt="No Image" width=""></div> 
 
     <div class="listingResultInfo"> 
 
     <h4 class="price">$12,900</h4> 
 
     <p class="address info">NorthWakefield, MI 49968</p> 
 
     <p class="listingNumber info">Listing Number: <a href="http://182.73.133.220/elder/listing-details/1101426">1101426</a></p> 
 
     <ul class="basicInfo"> 
 
      <li class="bed">3</li> 
 
      <li class="bath">2</li> 
 
      <li class="area">935 sqft</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>