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布局：

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