石積みフレキシボックス

Question

私は現在、純粋なCSS石積みグリッドを作成するには、次のコードを使用しています

.flex-container { 
    display: flex; 
    flex-flow: column wrap; 
    height: 29em; 
} 

.flex-item { 
    display: flex; 
    font-size: 30px; 
    min-height: 200px; /* Would use just `height` but Firefox is weird */ 
    flex: 0 0 auto; 
    width: 33.333%; 
} 

これは、しかし、私は手動でのデータを入力しています、正常に動作しています私はこのように行くために私のコンテンツを取得しようとしていますバックエンドと：

[1][2][3] 
[4][5][6] 
[7][8][9] 

代わりに、それはこのように終わる：

[1][4][7] 
[2][5][8] 
[3][6][9] 

どのように水平にカウントされたレイアウトを達成できますか？私はまた、高さがorderプロパティを使用する方法について

.flex-container { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    height: 29em; 
 
} 
 

 
.flex-item { 
 
    display: flex; 
 
    font-size: 30px; 
 
    min-height: 200px; /* Would use just `height` but Firefox is weird */ 
 
    flex: 0 0 auto; 
 
    width: 33.333%; 
 
} 
 

 
.flex-item:nth-child(1) { 
 
    min-height: 250px; 
 
} 
 

 
.flex-item:nth-child(2) { 
 
    min-height: 350px; 
 
} 
 

 
.flex-item:nth-child(3) { 
 
} 
 

 
.flex-item:nth-child(4) { 
 
    min-height: 300px; 
 
} 
 

 
.flex-item:nth-child(5) { 
 
    min-height: 250px; 
 
} 
 

 
.flex-item:nth-child(6) { 
 
} 
 

 
.flex-item:nth-child(7) { 
 
    min-height: 250px; 
 
} 
 

 
.flex-item:nth-child(8) { 
 
} 
 

 
.flex-item:nth-child(9) { 
 
    min-height: 400px; 
 
} 
 

 

 
/* cosmetic styles */ 
 

 
body { 
 
    font: 600 30px monospace; 
 
} 
 

 
.flex-item { 
 
    background: #95a5a6; 
 
    border-radius: 10px; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; /* to account for padding */ 
 
    color: #fff; 
 
    padding: 15px; 
 
} 
 

 
.flex-item:nth-child(6n + 1) { 
 
    background: #2ecc71; 
 
} 
 
.flex-item:nth-child(6n + 2) { 
 
    background: #3498db; 
 
} 
 
.flex-item:nth-child(6n + 3) { 
 
    background: #9b59b6; 
 
} 
 
.flex-item:nth-child(6n + 4) { 
 
    background: #f1c40f; 
 
} 
 
.flex-item:nth-child(6n + 5) { 
 
    background: #e67e22; 
 
} 
 
.flex-item:nth-child(6n) { 
 
    background: #e74c3c; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">1</div> 
 
    <div class="flex-item">2</div> 
 
    <div class="flex-item">3</div> 
 
    <div class="flex-item">4</div> 
 
    <div class="flex-item">5</div> 
 
    <div class="flex-item">6</div> 
 
    <div class="flex-item">7</div> 
 
    <div class="flex-item">8</div> 
 
    <div class="flex-item">9</div> 
 
</div>

Answer 1

.flex-container { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    height: 29em; 
 
} 
 

 
.flex-item { 
 
    display: flex; 
 
    font-size: 30px; 
 
    min-height: 200px; /* Would use just `height` but Firefox is weird */ 
 
    flex: 0 0 auto; 
 
    width: 33.333%; 
 
} 
 

 
.flex-item:nth-child(1) { 
 
    min-height: 250px; 
 
\t order: 1; 
 
} 
 

 
.flex-item:nth-child(2) { 
 
    min-height: 350px; 
 
\t order: 4; 
 
} 
 

 
.flex-item:nth-child(3) { 
 
\t order: 7; 
 
} 
 

 
.flex-item:nth-child(4) { 
 
    min-height: 300px; 
 
\t order: 2; 
 
} 
 

 
.flex-item:nth-child(5) { 
 
    min-height: 250px; 
 
\t order: 5; 
 
} 
 

 
.flex-item:nth-child(6) { 
 
\t order: 8; 
 
} 
 

 
.flex-item:nth-child(7) { 
 
    min-height: 250px; 
 
\t order: 3; 
 
} 
 

 
.flex-item:nth-child(8) { 
 
\t order: 6; 
 
} 
 

 
.flex-item:nth-child(9) { 
 
    min-height: 400px; 
 
\t order: 9; 
 
} 
 

 

 
/* cosmetic styles */ 
 

 
body { 
 
    font: 600 30px monospace; 
 
} 
 

 
.flex-item { 
 
    background: #95a5a6; 
 
    border-radius: 10px; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; /* to account for padding */ 
 
    color: #fff; 
 
    padding: 15px; 
 
} 
 

 
.flex-item:nth-child(6n + 1) { 
 
    background: #2ecc71; 
 
} 
 
.flex-item:nth-child(6n + 2) { 
 
    background: #3498db; 
 
} 
 
.flex-item:nth-child(6n + 3) { 
 
    background: #9b59b6; 
 
} 
 
.flex-item:nth-child(6n + 4) { 
 
    background: #f1c40f; 
 
} 
 
.flex-item:nth-child(6n + 5) { 
 
    background: #e67e22; 
 
} 
 
.flex-item:nth-child(6n) { 
 
    background: #e74c3c; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">1</div> 
 
    <div class="flex-item">2</div> 
 
    <div class="flex-item">3</div> 
 
    <div class="flex-item">4</div> 
 
    <div class="flex-item">5</div> 
 
    <div class="flex-item">6</div> 
 
    <div class="flex-item">7</div> 
 
    <div class="flex-item">8</div> 
 
    <div class="flex-item">9</div> 
 
</div>

どのように不明である私の問題を示すCodePenがありますか？