在CSS中，我們經常會用到盒子垂直排列的效果。這個效果在網頁布局中非常常見，可以用來排列導航欄、列表、圖片和文字等元素。下面我們來介紹如何使用CSS實現盒子的垂直排列。

首先，我們需要使用CSS中的display屬性。display有多種取值，其中flex是實現盒子垂直排列的常用值。下面是一個樣例：

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

在上面的例子中，我們使用了flex的列排列屬性flex-direction: column。這個屬性的作用是將盒子從水平排列變為垂直排列。如果不加這個屬性，盒子會按照默認的水平排列方式來排列。

接下來，我們可以使用align-items屬性來改變盒子在垂直方向上的對齊方式。下面是一個樣例：

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

在上面的例子中，我們使用了align-items:center。這個屬性的作用是將盒子在垂直方向上居中對齊。如果需要將盒子對齊到頂部或底部，則可以分別使用align-items:flex-start和align-items:flex-end。

另外，我們還可以使用justify-content屬性來改變盒子在水平方向上的對齊方式。下面是一個樣例：

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

在上面的例子中，我們使用了justify-content:space-around。這個屬性的作用是讓盒子在水平方向上均勻分布，同時留有一定的間距。如果需要將盒子集中在一起，則可以使用justify-content:center。

通過使用display、flex-direction、align-items和justify-content這幾個屬性，我們可以很方便地實現盒子的垂直排列。同時，我們還可以使用其他的CSS屬性來改變盒子的樣式和布局，實現更加復雜的效果。