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

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

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

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

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