CSS 是用來控制頁面樣式的語言之一，其中最重要的一個方面是控制元素的排列和布局。一些時候，我們希望修改一個元素的排列方式，將它從默認的橫向（也就是水平方向）改為縱向。這篇文章將詳細介紹如何使用 CSS 實現這個效果。

/* 在這里的代碼塊中，我們將展示如何變換類名為 "vertical" 的元素的排列方式。 */
.vertical {
display: flex; /* 將該元素設為 Flexbox，可以讓里面的子元素更方便地排列 */
flex-direction: column; /* 將 Flexbox 的排列方向設為縱向 */
}

以上代碼展示了如何迅速的將一個元素的排列方式修改為縱向。其中我們用到了 CSS3 引入的 "Flexbox" 功能。Flexbox 可以幫助我們更高效地排列元素，包括在縱向和橫向兩個方向上。在上面的代碼中，我們將元素的 "display" 設為 "flex"，這將啟動 Flexbox 功能，接著設定 "flex-direction" 為 "column"，即表示將該元素的排列方向設為縱向。

值得注意的是，此方法僅限于支持 CSS3 標準的瀏覽器，并且僅適用于在 HTML 中定義好類名的元素。如果您想縱向排列所有的

、、等元素，需要在對應元素的樣式中加入以上代碼。總體而言，這是一個非常便捷的方法，可以快速地調整元素的排列方式，為頁面的排版布局提供更多靈活性。