在Web開發中，使用列表可以更好地呈現數據和信息。然而，當列表項的數量過多或內容長度差異較大時，列表的排列就變得困難了。 在這種情況下，CSS自適應排列可以幫助我們方便地實現更好的排版效果。

在使用CSS自適應排列之前，我們應該了解一下兩種常用的列表排列方式：水平排列和垂直排列。在水平排列中，列表項水平放置，而在垂直排列中，列表項縱向排列。

當列表項數量過多時，水平排列會使列表在小屏幕上顯示不全，導致用戶體驗變差，這時候就需要使用CSS自適應垂直排列。

<ul class="list">
<li><a href="#">列表項一</a></li>
<li><a href="#">列表項二</a></li>
<li><a href="#">列表項三</a></li>
<li><a href="#">列表項四</a></li>
<li><a href="#">列表項五</a></li>
</ul>
.list {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.list li {
width: 50%;
padding: 0 10px;
box-sizing: border-box;
}

這是一段CSS代碼示例，可以實現列表自適應垂直排列。在這個例子中，我們使用了CSS Flexbox模型。Flexbox正如其名，這是一種 CSS 布局模式，可以讓排列更加靈活。我們在樣式中設置了兩個關鍵屬性：flex-wrap: wrap;和flex-direction: column;，這將把列表項以垂直方向排列，并自動將它們從左到右，從上到下地堆疊起來。

通過設置width: 50%;屬性，我們使每個列表項只占據其父元素寬度的一半，這樣就可以在父元素寬度改變時，自動調整每個列表項的寬度。

CSS自適應垂直排列是一種非常實用的列表排列方式，它可以適應不同的屏幕大小和設備類型，提高用戶體驗和網站的可用性。