Öğeleri daha küçük ekranlar için esnek kutuya nasıl sarın?

Question

Farklı yeniden boyutlandırma için bir düzen oluşturmaya çalışıyorum. Burada bu görüntülerde sonuca ulaşmak gerekir:

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

İşte codepen https://codepen.io/darudev/pen/pyBrzL

Sorun orada oluyor:

Bu kodu vardır 990px ​​yeniden boyutlandırma görünümü, "moc ile aynı görünümü oluşturmak için çözüm bulamıyorum kup".

Bana yardımcı olabilecek veya bana bazı önerilerde bulunabilecek biri var mı?

Teşekkür ederiz.

Answer 1

Kodunuzdaki tablo ve float özelliklerine ihtiyacınız yoktur.

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

Tüm düzen esnek kutu ile yapılabilir.

İşte çözüm: Ekran 990 pikselden daha küçük boyutlarda yeniden boyutlandırıldığında, esnek öğelerin sarılmasını ve ilk öğeye% 100 genişlik vermesini sağlayın; bu, aşağıdaki öğeleri bir sonraki satıra zorlar.

.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