Jak uzyskać samotny element w ostatniej linii układu flexbox, aby wyglądał tak samo?

Question

Próbuję utworzyć niektóre arkusze stylów CSS dla listy prostokątów, z zawijaniem, która jest responsywna. Prostokąty mogą zawierać zmienną ilość tekstu. Prostokąty powinny mieć minimalną szerokość 300 pikseli, ale mogą rosnąć, jeśli jest więcej miejsca. Powinno działać bez względu na liczbę prostokątów.

Jest to obraz tego, co chcę, żeby wyglądać, w szerokim ekranie pulpitu normalny pulpit i telefon, z grubsza:

(zdaję sobie sprawę, że większość telefonów i komputerów stacjonarnych są szersze niż w pikselach, ale te numery są łatwiejsze do pracy, jeśli chodzi o kod fragmentów So)

Próbuję trzy techniki, a żaden z nich robić, co chcę.

1. Flexbox nie działa:

Flexbox wydaje się idealny do tego zadania. Problem z implementacją Flexboksa polega na tym, że nie mogę znaleźć sposobu, aby upewnić się, że ostatni prostokąt pozostaje taki sam jak reszta, a jednocześnie pozwala, aby prostokąty rosły na bardzo szerokich ekranach. Oto obraz najlepszy wynik schematu flexbox że mogę wymyślić, który ma problem z ostatniej linii:

Oto kod realizacji schematu 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 technika nie działa:

Inną responsywną techniką jest używanie pływaków, ale nie mogę znaleźć sposobu na utrzymanie prostokąta o tej samej szerokości (z różną zawartością tekstu), jednocześnie pozwalając im na rozwijanie się na najszerszych ekranach. Oto obraz tego, co skończyło się z:

Oto kod realizacji 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. Dlaczego nie zapytań o media?

Szukam rozwiązania, które nie obejmuje zapytań o media, ponieważ zapytania o media pozwalają tylko ustawić warunki na szerokość ekranu, a nie na szerokości .container.

Answer 1

Można nadal używać Flex z dodatkowym elementem poprzez pseudo bez wysokości:

.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>

: Zauważ, że jest w porządku za pięć, sześć na zachowanie pudełka jest inny.

Answer 2

Wiem, że powiedziałeś, że szukasz odpowiedzi, która nie dotyczy zapytań w mediach, ale uważam, że byłby to najlepszy sposób na poradzenie sobie z tą sytuacją.

Jeśli ustawisz position: relative; na swoim .container wszystkie jego dzieci oprą swój procent szerokości z szerokości .container. Choć technicznie nadal opierasz swoje warunki na szerokości ekranu, możesz ustawić szerokość kontenera na dowolny rozmiar, a .rect przeskaluje do tej szerokości, zależałaby tylko od tego, które z zapytań o media były aktywne dla jaki procent waszych .rect będzie skalowany.

Możesz również ustawić wartość max-width: dla swojego .container w dowolnym z zapytań o media, jeśli nie chcesz, aby przekroczył określony rozmiar.

Oto link do pióra, którego układ wygląda jak zamierzony obraz powyżej. 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%; 
    } 
}