CSS中的flex屬性被廣泛應用于布局設計中，它可以很方便地實現基于容器的自適應布局，讓HTML頁面的排版工作更加簡單易用。

.container {
display: flex;
}

上述代碼就是一個基本的flex容器，它將子元素進行自適應排列，使得容器內的元素可以在一排中均勻分布，避免了我們手動進行像素單位下的對齊調整工作，節省了大量的時間和精力。

.item {
flex: 1;
}

在flex布局中，也經常使用到 item 的 flex屬性，它可以設置元素子項在容器內的占比，來實現元素的自適應排列。一個flex值為 1 的 item 占據了容器中1份，也就是說，容器中有幾個 item，他們就會按照自適應的方式占據各自的比例，便于我們快速進行產品界面等設計工作，使得設計更加符合用戶要求。

.container {
flex-wrap: wrap;
}

最后，還有一個常用的 flex屬性 - flex-wrap，它可以控制容器內的元素是否換行。這樣，當容器中的元素數量過多時，頁面會自動進行換行，排版更加美觀規整。