在學(xué)習(xí)CSS布局時(shí)，我們經(jīng)常會(huì)遇到兩個(gè)概念：主軸和側(cè)軸。這兩個(gè)概念用于描述Flexbox和Grid布局中的方向和對(duì)齊方式。

首先來看主軸。主軸是指Flexbox或Grid容器的主要方向。在Flexbox中，主軸可以是水平方向（row）或垂直方向（column），默認(rèn)是水平方向。在Grid中，主軸可以是列（column）或行（row），默認(rèn)是列。

為了改變Flexbox容器的主軸方向，我們可以使用flex-direction屬性。例如，將主軸方向改為垂直方向：

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

這樣，容器內(nèi)的項(xiàng)目將會(huì)在垂直方向上排列。

接下來是側(cè)軸。側(cè)軸是指Flexbox或Grid容器的次要方向，與主軸垂直。在Flexbox中，側(cè)軸也可以是水平方向或垂直方向。在Grid中，則是行或列的對(duì)應(yīng)方向。

為了改變Flexbox容器的側(cè)軸對(duì)齊方式，我們可以使用justify-content和align-items屬性。justify-content影響項(xiàng)目在主軸上的對(duì)齊方式，而align-items影響項(xiàng)目在側(cè)軸上的對(duì)齊方式。

.container {
display: flex;
justify-content: center; /* 主軸居中對(duì)齊 */
align-items: center; /* 側(cè)軸居中對(duì)齊 */
}

以上代碼將Flexbox容器內(nèi)的項(xiàng)目在主軸和側(cè)軸上都居中對(duì)齊。

總之，了解主軸和側(cè)軸的概念可以幫助我們更好地進(jìn)行CSS布局，提高開發(fā)效率。