在前端開發中，我們經常需要修改網頁的布局。而有時候，我們需要將網頁中的主軸 (main axis) 方向進行改變，例如從水平方向變為垂直方向。這時候，就需要使用 CSS 來改變主軸方向。

CSS 中使用flex-direction屬性來設置主軸的方向，可以設置為以下四個值之一：

flex-direction: row;           /* 默認值，主軸方向為水平方向 */
flex-direction: row-reverse;   /* 主軸方向為水平方向，但是從右向左 */
flex-direction: column;        /* 主軸方向為垂直方向 */
flex-direction: column-reverse;/* 主軸方向為垂直方向，但是從下向上 */

例如，如果我們將主軸方向改為垂直方向，可以將flex-direction屬性設置為column：

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

這里.container是一個包含所有需要布局的元素的容器，將容器的display屬性設置為flex就能啟用 flex 布局。

另外，如果需要改變項目在交叉軸 (cross axis) 方向上的排列方式，可以使用align-items屬性來控制。例如，如果希望項目在交叉軸方向上水平居中，可以將align-items屬性設置為center：

.container {
display: flex;
flex-direction: column;      /* 主軸方向為垂直方向 */
align-items: center;         /* 交叉軸方向上水平居中 */
}

在實際布局中，主軸方向以及項目在交叉軸方向上的排列方式需要根據實際需求進行調整。使用 flex 布局能夠使開發者更便捷地實現復雜布局，提升開發效率。