Jak owijać elementy w flexbox na mniejsze ekrany?

Question

Próbuję utworzyć układ dla różnych rozmiarów. Muszę osiągnąć wynik w tych zdjęć tutaj:

mam ten kod:

.container { 
 
    position: relative; 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 
.item { 
 
    background-color: black; 
 
    box-sizing: border-box; 
 
    padding: 20px; 
 
    flex: 2; 
 
    color: #fff; 
 
} 
 
.item:nth-child(2) { 
 
    background-color: grey; 
 
    flex: 1 
 
} 
 
.item:nth-child(3) { 
 
    background-color: green; 
 
    flex: 0.5; 
 
} 
 
@media screen and (max-width: 990px) { 
 
    .container { 
 
    height: auto; 
 
    display: table; 
 
    } 
 
    .item:nth-child(2) { 
 
    float: left; 
 
    } 
 
    .item:nth-child(3) { 
 
    float: right; 
 
    } 
 
}

<section class="container"> 
 
    <div class="item"> 
 
    <h2>title1</h2> 
 
    <hr>You'll notice that even though this column has far more content in it, instead of the other columns ending early, they size themselves to meet the end of this column vertically.</div> 
 
    <div class="item"> 
 
    <h2>title2</h2> 
 
    <hr>Normally, the only way to achieve this would be either a hack, or to set all boxes to min-height. 
 
    </div> 
 
    <div class="item"> 
 
    <h2>title3</h2> 
 
    <hr>This is a column with not much content. 
 
    </div> 
 
</section>

Tutaj istnieje codepen https://codepen.io/darudev/pen/pyBrzL

problem jest w 990px ​​zmiana rozmiaru widoku, nie znajduję rozwiązania, aby utworzyć ten sam widok co "moc" kup ".

Czy jest ktoś, kto może mi pomóc lub podsunie mi jakieś sugestie?

Dziękuję.

Answer 1

Nie potrzebujesz właściwości tabeli i float w swoim kodzie.

@media screen and (max-width: 990px) { 
    .container { 
    height: auto; 
    display: table; 
    } 
    .item:nth-child(2) { 
    float: left; 
    } 
    .item:nth-child(3) { 
    float: right; 
    } 
} 

Cały układ można wykonać za pomocą flexbox.

Oto rozwiązanie: Gdy ekran zmienia rozmiar mniejszy niż 990px, pozwalają Flex elementów zawinąć i dać pierwszy element 100% szerokości, co zmusza następujące pozycje do następnego wiersza.

.container { 
 
    display: flex; 
 
} 
 

 
.item { 
 
    background-color: black; 
 
    box-sizing: border-box; 
 
    padding: 20px; 
 
    flex: 2; 
 
    color: #fff; 
 
} 
 

 
.item:nth-child(2) { 
 
    background-color: grey; 
 
    flex: 1; 
 
} 
 

 
.item:nth-child(3) { 
 
    background-color: green; 
 
    flex: 0.5; 
 
} 
 

 
@media screen and (max-width:990px) { 
 
    .container { flex-wrap: wrap; } 
 
    .item:first-child { flex-basis: 100%; } 
 
}

<section class="container"> 
 
    <div class="item"> 
 
    <h2>title1</h2> 
 
    <hr>You'll notice that even though this column has far more content in it, 
 
     instead of the other columns ending early, they size themselves to meet the end 
 
     of this column vertically.</div> 
 
    <div class="item"> 
 
    <h2>title2</h2> 
 
    <hr>Normally, the only way to achieve this would be either a hack, or to set 
 
     all boxes to min-height.</div> 
 
    <div class="item"> 
 
    <h2>title3</h2> 
 
    <hr>This is a column with not much content. 
 
    </div> 
 
</section>

revised codepen