CSS Flex（彈性盒子）可以讓我們更容易地創建具有響應性的布局，并且在不同大小的屏幕上都可以很好地呈現。在這篇文章中，我們將學習如何使用CSS Flex創建一個3列布局。

　　首先，我們需要在包含這3列布局的父元素上應用Flex，這樣我們才能控制子元素的布局方式。具體來說，我們需要設置這個父元素的display屬性為flex。

.parent {
display: flex;
}

　　現在，我們已經可以創建3個并列的列了。默認情況下，這3個元素的寬度會根據內容自適應，但是我們可以使用Flex的強大功能來控制它們。

　　我們可以使用flex-basis屬性設置每個子元素的默認寬度，使用flex-grow屬性使一個子元素在空余空間中擴展以達到填充父元素的目的。在本例中，我們想要所有3個子元素都等寬，因此我們將flex-basis設置為0，并將flex-grow設置為1。這樣，每個子元素都會占用相同比例的空間，而不是默認情況下的自適應寬度。

.child {
flex: 1 0 0;
}

　　最后，我們可以選擇通過設置子元素的margin屬性來創建間距。在本例中，我們希望每個子元素之間有一定的間距，我們可以添加一個10像素的margin。

.child {
margin: 0 10px;
}

　　這是我們完整的CSS代碼：

.parent {
display: flex;
}
.child {
flex: 1 0 0;
margin: 0 10px;
}

　　現在我們已經創建了一個基本的3列布局。當我們將頁面縮小或放大時，這些列的寬度將以類似于平滑動畫的方式自適應屏幕寬度。