CSS彈性盒是一種用于布局網頁的強大工具，可以使元素在屏幕上進行非常靈活的布局。其中，彈性盒垂直排列元素的方式也十分實用，下面我們就來學習一下。

首先，我們需要在CSS中定義display為flex來創建一個彈性盒容器。然后，我們可以利用flex-direction屬性來指定排列方向。在垂直方向上，我們需要將它設置為column。

.container {
display: flex;
flex-direction: column;
}

然后，我們需要為子元素定義一個屬性：flex-grow。它的作用是使子元素占據容器的全部高度。這個屬性的值可以是任何數字，但通常是1，它代表著將所有可用空間均等地分配給子元素。

.item {
flex-grow: 1;
}

最后，我們需要將所有子元素的高度設置為0，以使它們占據整個可用空間。

.item {
height: 0;
}

通過這些設置，我們可以使彈性盒中的子元素在垂直方向上均等地排列，而不必擔心它們的具體尺寸。

總結一下，使用CSS彈性盒的垂直排列方式可以非常靈活，同時還能避免很多布局上的問題。通過對彈性盒的掌握，我們可以更好地布局我們的網頁。