如何在较小的屏幕中包装Flexbox中的项目？

Question

我正在尝试为不同的大小创建布局。我需要这些图片在这里以达到结果：

我有这样的代码：

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

这里有一个codepen https://codepen.io/darudev/pen/pyBrzL

问题是990px​​调整视图大小，我找不到与“moc”创建相同视图的解决方案KUP”。

有没有人可以帮助我或给我一些建议？

谢谢。

Answer 1

您不需要代码中的表和浮动属性。

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

整个布局可以用flexbox制作。

这里的溶液：当屏幕调整大小比990px​​小，允许柔性物品包裹以及给所述第一项的100％的宽度，这迫使以下项目到下一行。

.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