Làm thế nào để có được một phần tử duy nhất trong dòng cuối cùng của bố cục flexbox trông giống nhau?

Question

Tôi đang cố gắng tạo một số CSS cho danh sách hình chữ nhật, với gói, đó là đáp ứng. Các hình chữ nhật có thể chứa một số lượng văn bản thay đổi. Hình chữ nhật phải có chiều rộng tối thiểu là 300px nhưng có thể phát triển nếu có nhiều không gian hơn. Nó sẽ làm việc không có vấn đề số lượng hình chữ nhật.

Đây là hình ảnh của những gì tôi muốn nó như thế nào, trong một màn hình máy tính để bàn rộng, một màn hình bình thường máy tính để bàn và điện thoại, đại khái là:

(Tôi nhận ra rằng hầu hết các điện thoại và máy tính để bàn rộng hơn mà bằng pixel, nhưng những con số này dễ dàng hơn để làm việc với khi nói đến đoạn mã sO của)

tôi đang cố gắng ba kỹ thuật, và không ai trong số họ làm những gì tôi muốn.

1. Flexbox không hoạt động:

Flexbox có vẻ lý tưởng cho công việc này. Vấn đề với việc triển khai flexbox là tôi không thể tìm ra cách để đảm bảo hình chữ nhật cuối cùng vẫn giữ nguyên kích thước như phần còn lại, đồng thời cho phép các hình chữ nhật phát triển trong các màn hình rất rộng. Dưới đây là một hình ảnh của kết quả flexbox tốt nhất mà tôi có thể đưa ra, trong đó có vấn đề với dòng cuối cùng:

Dưới đây là đoạn code của việc thực hiện flexbox:

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.rect { 
 
    flex: 1 0 300px; 
 
    height: 150px; 
 
}

<div class="container"> 
 
    <div class="rect" style="background-color: #2F80ED"></div> 
 
    <div class="rect" style="background-color: #2D9CDB"></div> 
 
    <div class="rect" style="background-color: #56CCF2"></div> 
 
    <div class="rect" style="background-color: #A6E2F5"></div> 
 
    <div class="rect" style="background-color: #D6EBF2"></div> 
 
</div>

2. float: left kỹ thuật không hoạt động:

Một kỹ thuật đáp ứng khác là sử dụng phao, nhưng tôi không thể tìm cách giữ hình chữ nhật có chiều rộng giống nhau (với nội dung văn bản khác nhau), đồng thời cho phép chúng phát triển ở các màn hình rộng nhất. Dưới đây là một hình ảnh của những gì tôi đã kết thúc với:

Dưới đây là đoạn code của việc thực hiện float: left:

.container:after { 
 
    content: ""; 
 
    clear: both; 
 
} 
 
.rect { 
 
    float: left; 
 
    min-width: 300px; 
 
    height: 150px; 
 
    overflow-y: hidden; 
 
}

<div class="container"> 
 
    <div class="rect" style="background-color: #2F80ED">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</div> 
 
    <div class="rect" style="background-color: #2D9CDB"></div> 
 
    <div class="rect" style="background-color: #56CCF2">Lorem ipsum dolor sit amet, consectetur</div> 
 
    <div class="rect" style="background-color: #A6E2F5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</div> 
 
    <div class="rect" style="background-color: #D6EBF2"></div> 
 
</div>

3. Tại sao không truy vấn phương tiện?

Tôi đang tìm giải pháp không liên quan đến truy vấn phương tiện, vì truy vấn phương tiện chỉ cho phép bạn đặt điều kiện trên chiều rộng màn hình chứ không phải trên chiều rộng .container.

Answer 1

Bạn có thể tiếp tục sử dụng flex với một yếu tố thêm qua một giả không có chiều cao:

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background:gray;/*see me */ 
 
} 
 
.container:after { 
 
    content:''; 
 
    flex: 1 0 300px; 
 
    margin-bottom:auto; 
 
    } 
 
.rect { 
 
    flex: 1 0 300px; 
 
    height: 150px; 
 
}

<div class="container"> 
 
    <div class="rect" style="background-color: #2F80ED"></div> 
 
    <div class="rect" style="background-color: #2D9CDB"></div> 
 
    <div class="rect" style="background-color: #56CCF2"></div> 
 
    <div class="rect" style="background-color: #A6E2F5"></div> 
 
    <div class="rect" style="background-color: #D6EBF2"></div> 
 
</div>

: Lưu ý rằng là tốt cho năm, sáu hộp hành vi là khác nhau.

Answer 2

Tôi biết bạn đã nói rằng bạn đang tìm kiếm câu trả lời không liên quan đến truy vấn phương tiện, nhưng tôi tin rằng đó sẽ là cách tốt nhất để xử lý tình huống này.

Nếu bạn đặt position: relative; trên .container tất cả các con của nó sẽ căn cứ tỷ lệ phần trăm chiều rộng của chúng theo chiều rộng .container. Mặc dù về mặt kỹ thuật, bạn vẫn có thể đặt điều kiện theo chiều rộng màn hình, bạn vẫn có thể đặt chiều rộng vùng chứa thành bất kỳ kích thước nào bạn muốn và số lượng của .rect sẽ mở rộng theo chiều rộng đó. tỷ lệ phần trăm của bạn .rect sẽ được chia tỷ lệ.

Bạn cũng có thể đặt max-width: cho số .container của mình trong bất kỳ truy vấn phương tiện nào nếu bạn không muốn nó phát triển vượt quá một kích thước nhất định.

Đây là liên kết đến một cây bút có bố cục trông giống như hình ảnh dự định của bạn ở trên. http://codepen.io/bryanrunner/pen/BppzbE

.container { 
    position: relative; 
    display: flex; 
    flex-flow: row wrap; 
    max-width: 1200px; 
} 
.rect { 
    height: 150px; 
} 

@media (max-width: 1920px) { 
    .rect { 
    width: 20%; 
    } 
} 

@media (max-width: 1000px) { 
    .rect { 
    width: 50%; 
    } 
} 

@media (max-width: 600px) { 
    .rect { 
    width: 100%; 
    } 
}