移動端開發中，列表布局是常見的需求之一。如何用CSS來實現靈活的列表布局呢？下面我們來詳細介紹一下。 首先，我們可以利用Flexbox來實現列表布局。Flexbox 是 CSS3 提出的一種布局模型，因為它可以方便地實現彈性布局，所以被開發者們廣泛使用。 我們可以為列表的容器設置 display: flex; 使其成為 Flexbox 布局模型，然后再設置 flex-direction: column; 讓列表垂直排列。每一個列表項可以使用 flex: 1; 將它們的寬度平均分配，達到等分列表的效果。 示例代碼如下：

.list-container {
display: flex;
flex-direction: column;
}
.list-item {
flex: 1;
text-align: center;
}

另外，我們還可以使用CSS的Grid布局來實現列表布局。Grid 布局相較于 Flexbox 布局，它的布局更加靈活。我們可以先設置網格容器的 display: grid;，再通過 grid-template-columns 屬性來定義每一列的寬度，然后通過 grid-auto-rows 屬性來定義每一行的高度。 示例代碼如下：

.list-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自適應多列 */
grid-auto-rows: 100px; /* 行高 */
gap: 10px; /* 列間距 */
}
.list-item {
background-color: #ccc;
text-align: center;
}

以上就是移動端列表布局的兩種方案，根據需求來選擇適合的方案，使布局更加美觀和靈活。