砌体Flexbox，就用但是为了去水平，而不是垂直高度不同

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] 

如何实现水平计数布局？我也有一个CodePen显示我的问题的高度是未知

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

有关使用order性能如何？