砌体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显示我的问题高度未知

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

.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;
	order: 1;
}

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

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

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

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

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

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

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

.flex-item:nth-child(9) {
  min-height: 400px;
	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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何使用order属性？