Hộp Flex mặt hàng cuối cùng có chiều rộng đầy đủ của container. Làm thế nào tôi có thể giải quyết điều này?

Question

Mục hàng cuối cùng có chiều rộng đầy đủ tuy nhiên tôi muốn mục hàng cuối cùng có chiều rộng giống với tất cả các mục khác. Tôi đã đính kèm ảnh chụp màn hình minh họa sự cố của mình.

Có khả thi với flexbox hoặc tôi phải sử dụng css đơn giản cho yêu cầu của mình không? Hoặc tôi nên sử dụng bảng hiển thị và tài sản của bảng?

Cảm ơn trước!

* { 
 
    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

Set flex-phát triển đến 0. Thay đổi flex: 1 33.33% để flex: 0 1 33.33% trên các yếu tố danh sách.

Đây là mã làm việc của bạn: https://jsfiddle.net/ecgx58ep/2/

Xem liên kết này để biết thêm thông tin về flex-phát triển: https://developer.mozilla.org/en/docs/Web/CSS/flex-grow

Answer 2

Bạn có thể thay đổi flex: 1 33.33% để flex: 0 1 33.33%. Bây giờ flex-grow sẽ bị vô hiệu hóa và hàng cuối cùng sẽ hoạt động.

Vì bạn đã đặt flex-basis trong số 33,33% trong số flex: 0 1 33.33%, bạn có thể xóa width: 33.33%.

Xem bản demo dưới đây:

* { 
 
    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>