CSS3的flex布局是一種新型的布局方式，它能夠幫助網頁設計者靈活地控制元素的排列方向、尺寸和間隔。

使用flex布局的關鍵是父容器，需要將其設置為display:flex。然后，通過設置其子元素的屬性，來實現所需的布局效果。

.parent{
display:flex;
flex-direction:row; /*方向為水平排列*/
justify-content: center; /*在主軸上居中對齊*/
align-items: center; /*在交叉軸上居中對齊*/
}
.child{
flex: 1; /*子元素可在主軸上擴展，占據剩余空間*/
margin: 10px; /*子元素之間的間隔為10像素*/
}

這段代碼中，父元素設置了flex-direction屬性為row，即水平排列，justify-content屬性為center，使子元素在主軸上居中對齊。align-items屬性為center，使子元素在交叉軸上居中對齊。而子元素則設置了flex屬性為1，表示可以在主軸上自由擴展，同時設置了margin屬性為10px，實現了子元素之間的間隔效果。

通過使用CSS3的flex布局，能夠輕松地實現各種不同的網頁布局效果，使網頁設計更加靈活多變。