CSS3中的flexbox布局可以讓我們更加靈活的控制網頁中的元素布局。使用flex布局，可以實現多種不同的特效。

使用flexbox布局，我們可以使用以下屬性：

display: flex; /* 聲明flex容器 */
flex-direction: row/column; /* 指定主軸方向 */
flex-wrap: nowrap/wrap/wrap-reverse; /* 指定是否換行 */
justify-content: flex-start/flex-end/center/space-between/space-around; /* 指定主軸對齊方式 */
align-items: flex-start/flex-end/center/stretch/baseline; /* 指定交叉軸對齊方式 */
align-content: flex-start/flex-end/center/stretch/space-between/space-around; /* 指定多行對齊方式 */

使用這些屬性，我們可以實現各種各樣的布局效果。例如，下面的代碼實現一個簡單的flex布局：

<div class="flex-container">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box {
width: 50px;
height: 50px;
background-color: #00ff00;
margin: 10px;
}

以上代碼實現一個簡單的水平居中的效果。其中，我們使用了display: flex;將容器設置為flex容器，使用flex-direction: row;指定主軸方向為水平方向，使用justify-content: center;和align-items: center;來實現水平居中和垂直居中的效果。