按不同顺序排列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>