ロングラップフレックスアイテム他を押し下げる

Question

フレックスボックスに3つの異なる長さのアイテムがあります。各divは47％の幅です。私はそれらをラップさせるためにフレックスラップを使用しています。最長のdivは2番目のdivで、3番目のdivを最後まで押し込みます。最初のdivの下で3番目のdivを直してもらえますか？

CodePen

HTML

<div class="flex-box"> 
    <div class="flex-item"> 
    <ul> 
     <li></li> 
     <li></li> 
    </ul> 
    </div> 
    <div class="flex-item"> 
    <ul> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ul> 
    </div> 
    <div class="flex-item"> 
    <ul> 
     <li></li> 
     <li></li> 
    </ul> 
    </div> 
</div> 

CSS

.flex-box{ 
    display: flex; 
    background: black; 
    flex-wrap: wrap; 
    width: 500px; 
    justify-content: space-between; 
    align-items: flex-start; 

} 
.flex-item{ 
    width: 47%; 
    background: red; 
    border: 1px solid white; 
    margin-bottom: 10px; 
} 

Answer 1

単一の容器を垂直方向と水平方向の両方の項目を配置するため、gridいうよりflex使用 - それはそれはのために何です！

.flex-box{ 
    display: grid; 
    grid-template-columns: 47% 47%; 
    grid-template-rows: 78px auto; 
    background: black; 
    width: 500px; 
    justify-content: space-between; 
    align-items: start; 

} 
.flex-item{ 
    width: 100%; 
    background: red; 
    border: 1px solid white; 
    margin-bottom: 10px; 
} 

.flex-item:nth-of-type(2) { 
    grid-row-start: span 2; 
} 

あなたはnth-of-typeをいじる避けるためにHTMLにクラスを追加/変更することがあります。

は、ここでHTML変わらずで、grid解決のためのCSSです。

Answer 2

class="flex-item"を次のように並べ替えます。

<div class="flex-item"></div> 
<div class="flex-item"></div> 
<div class="flex-item"></div> //Longest div container 

そして、flex-direction:columnを容器に入れてください。 あなたのコンテナにmax-height:(Anything less than your container height)を付けることを忘れないでください。

---

.flex-box { 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: black; 
 
    flex-wrap: wrap; 
 
    width: 500px; 
 
    max-height: 520px; 
 
    justify-content: space-between; 
 
} 
 

 
.flex-item { 
 
    width: 47%; 
 
    background: red; 
 
    border: 1px solid white; 
 
    margin-bottom: 10px; 
 
}

<div class="flex-box"> 
 
    <div class="flex-item"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="flex-item"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </div> 
 
    <div class="flex-item"> 
 
    <ul> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ul> 
 
    </div> 
 
</div>