CSS làm cho các yếu tố bọc flex không vượt quá chiều rộng của anh chị em

Question

Tôi đang gặp vấn đề với độ giãn dài. Tôi có flexbox div với các mục. Các mục này có thể kéo dài đến toàn bộ chiều rộng và có thuộc tính có chiều rộng tối thiểu để 3-4 phần tử có thể vừa với màn hình lớn và 1-2 phần tử nhỏ. Tôi muốn làm cho chiều rộng của họ bằng nhau, nhưng vấn đề là các mặt hàng được bao bọc rộng hơn nếu số lượng của chúng nhỏ hơn các yếu tố hàng đầu.

Được đính kèm bên dưới kết quả hiện tại của tôi và hành vi mong đợi. Làm thế nào tôi có thể làm cho nó?

.items { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
} 
 

 
.item { 
 
    min-width: 400px; 
 
    border: 1px solid black; 
 
    margin: 0; 
 
    height: 200px; 
 
    flex-grow: 1; 
 
}

<div class="items"> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
</div>

Cảm ơn!

---

Cập nhật 02.05.2016

Nhờ @vals tôi đã đưa ra giải pháp rộng tỷ lệ phần trăm cho các kích cỡ màn hình khác nhau. (Tuy nhiên, có vẻ như tôi đang gặp một số vấn đề nhỏ với 33% các yếu tố chiều rộng, trong đó 1% không gian trống còn lại xung quanh họ xD)

.items { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    align-items: center; 
 
} 
 

 
@media only screen and (max-width: 820px) { 
 
    .item { 
 
    width: 100%; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 821px) and (max-width: 1220px) { 
 
    .item { 
 
    width: 50%; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1221px) and (max-width: 1620px) { 
 
    .item { 
 
    width: 33%; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1621px) and (max-width: 2020px) { 
 
    .item { 
 
    width: 25%; 
 
    } 
 
} 
 

 
.item { 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    margin: 0; 
 
    height: 200px; 
 
}

<div class="items"> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
</div>

Answer 1

Đây là một trường hợp phức tạp, bạn cần truy vấn phương tiện truyền thông thích nghi với bố cục cụ thể và số lượng phần tử hiện tại.

Tôi có mã màu các phương tiện truyền thông khác nhau truy vấn kết quả để giúp nhận dạng chúng

Và cũng có thể, ba divs thêm bên trong phần tử mục để giúp đỡ với các kích thước

.items { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
} 
 

 
.item { 
 
    min-width: 400px; 
 
    border: 1px solid black; 
 
    margin: 0; 
 
    height: 100px; 
 
    flex-grow: 2; 
 
} 
 

 
.filler1, .filler2, .filler3 { 
 
    height: 0px; 
 
    background-color: lightgreen; 
 
} 
 

 
@media only screen and (max-width: 820px) { 
 
    /* one item per line */ 
 
    .filler2, .filler3 {display: none;} 
 
    .item {background-color: yellow;} 
 
} 
 

 
@media only screen and (min-width: 821px) and (max-width: 1220px) { 
 

 
    /* 2 items per line */ 
 

 
    .item:nth-last-child(4) { 
 
     order: 9; 
 
     background-color: red; 
 
    } 
 
    .filler1 { 
 
     margin-right: 100%; 
 
    } 
 
    .filler2 { 
 
     min-width: 200px; 
 
     flex-grow: 1; 
 
     order: 4; 
 
    } 
 
    .filler3 { 
 
     min-width: 200px; 
 
     flex-grow: 1; 
 
     order: 14; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1221px) and (max-width: 1620px) { 
 

 
    .item:nth-last-child(4), .item:nth-last-child(5) { 
 
     order: 9; 
 
     background-color: green; 
 
    } 
 
    .filler1 { 
 
     margin-right: 100%; 
 
    } 
 
    .filler2 { 
 
     min-width: 200px; 
 
     flex-grow: 1; 
 
     order: 4; 
 
    } 
 
    .filler3 { 
 
     min-width: 200px; 
 
     flex-grow: 1; 
 
     order: 14; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1621px) and (max-width: 2020px) { 
 

 
    .item:nth-last-child(4) { 
 
     order: 9; 
 
     background-color: lightblue; 
 
    } 
 
    .filler1 { 
 
     margin-right: 100%; 
 
    } 
 
    .filler2 { 
 
     min-width: 400px; 
 
     flex-grow: 2; 
 
     order: 4; 
 
    } 
 
    .filler3 { 
 
     min-width: 400px; 
 
     flex-grow: 2; 
 
     order: 14; 
 
    } 
 
}

<div class="items"> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
    <div class="item">1</div> 
 
    <div class="filler1"></div> 
 
    <div class="filler2"></div> 
 
    <div class="filler3"></div> 
 
</div>