CSS3里的flex布局是一種全新的布局方式，它可以使我們更輕松地實現頁面的布局。Flex布局的核心思想是將容器分為“主軸”和“交叉軸”，通過設置容器和元素的屬性來控制排列方式、對齊方式和伸縮比例等，下面我們來看一下flex的用法。

.container {
	display: flex; /* 使用flex布局*/
	flex-direction: row; /* 指定主軸方向為橫向，如果改為column則為縱向 */
	flex-wrap: wrap; /* 設置是否換行，nowrap為不換行，wrap為自動換行 */
	justify-content: space-between; /* 指定子元素在主軸上對齊方式，space-between表示平均分布 */
	align-items: center; /* 指定子元素在交叉軸上對齊方式，center表示居中對齊 */
}
.item {
	flex: 1; /* 設置子元素在主軸上占比，值為數字則表示占比，如果為auto則會自動撐滿空間 */
	align-self: flex-start; /* 單獨控制某個元素在交叉軸上的對齊方式，flex-start表示頂部對齊 */
	order: 2; /* 控制子元素的排列順序，值越小越靠前 */
}

通過上面的代碼片段，我們可以看到flex布局具有很強的控制能力，可以實現多種排版方式。使用flex布局時需要注意子元素在空間分配上的協調，以免出現布局失調的情況。同時，我們也可以通過組合其他CSS屬性來進一步優化布局效果。