CSS彈性布局是現(xiàn)在流行的前端頁面布局方式之一，它可以在不同屏幕大小和設備上，使頁面元素以一種自然的方式排列，使得頁面看起來更美觀。要了解如何實現(xiàn)垂直排列，我們需要了解CSS彈性盒模型的一些概念。

.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

使用flex-direction屬性，我們可以將flex容器的主軸方向設置為列方向。justify-content屬性用于確定項目在主軸上的對齊方式，這里我們選擇居中對齊。同樣地，使用align-items屬性可以確定項目在交叉軸上的對齊方式，這里我們也選擇居中對齊。

接下來，我們可以在容器內添加子元素進行布局。

.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item{
margin: 10px;
width: 200px;
height: 100px;
}

在子元素上，我們指定了一些基本的樣式，包括邊距、寬度和高度。如果你想根據你的設計進行更改，請隨時進行調整。

最后，我們可以在HTML中添加代碼來渲染布局：

<div class="container">
<div class="item">這是第一個項目</div>
<div class="item">這是第二個項目</div>
<div class="item">這是第三個項目</div>
</div>

現(xiàn)在，你可以使用上述CSS代碼和HTML代碼來創(chuàng)建一個基本的CSS彈性布局，實現(xiàn)垂直方向的排列。你可以根據你的需要進行更改和調整，讓你的布局更加美觀。