CSS3是現代網頁設計中必不可少的一部分，它不僅可以實現豐富的樣式效果，還可以優化頁面性能和用戶體驗。在CSS3中，flex布局是一個非常強大而靈活的布局方式。它可以讓我們輕松地實現主軸和側軸方向上的布局。

所謂主軸，就是在flex容器的方向上，元素的排列方向。比如，如果flex容器是水平方向排列的，那么主軸方向就是從左到右的方向。側軸，就是與主軸垂直的方向，也就是在flex容器的另一個方向上。比如，如果flex容器是水平方向排列的，那么側軸方向就是從上到下的方向。

.container {
display: flex; /* 設置flex布局 */
flex-direction: row; /* 設置主軸方向為從左到右 */
justify-content: center; /* 將元素在主軸方向上居中 */
align-items: center; /* 將元素在側軸方向上居中 */
}
.item {
width: 100px;
height: 100px;
background-color: red;
}

在上述示例中，我們設置了一個flex容器，并將主軸方向設置為從左到右。然后，我們使用justify-content屬性將元素在主軸方向上居中，使用align-items屬性將元素在側軸方向上居中。我們還定義了一個.item類，用于設置每個子元素的樣式。

總的來說，了解主軸和側軸的概念，可以讓我們更加靈活地使用flex布局，并實現更加優美和高效的網頁設計。