以不同的顺序排列div

Question

我正在尝试以不同的顺序堆叠div，如图所示。尝试弯曲但最终徒劳无功。

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
</ul>
ul{
  background:#b9b3af;
  padding:30px 20px;
  display:flex;
  flex-flow:column wrap;
  align-items:flex-start;
  height:200px
}
li{
  background:#fff;
  padding:40px;
  text-align:center;
  list-style-type:none;
  margin:10px
}

另请参阅fiddle

Answer 1

以下是 Demo

ul{
  background:#b9b3af;
  padding:30px 20px;
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items:flex-start;
  height:250px
}
li{
  background:#fff;
  padding:40px;
  text-align:center;
  list-style-type:none;
  margin:10px
}

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
</ul>