CSS3有很多新的特性，但其中最重要的可能就是Flexbox了。Flexbox，也叫做“彈性布局”，是一種基于“容器（container）” 和“項目（item）”的布局方式。它允許你更容易的實現復雜的布局，而不用借助HTML表格或大量的嵌套元素。

下面是Flexbox布局的一個經典例子。假設我們要實現一個導航欄，其中有三個菜單項，分別是“Home”，“Products”和“Contact Us”。以下是相應的HTML：

<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

現在，我們可以為“nav”類添加以下Flexbox屬性：

.nav {
display: flex;
justify-content: center;
align-items: center;
}

上面的代碼將菜單項包含在flex容器中，并使它們在容器中垂直和水平居中。現在，我們想給菜單項添加一些間距和顏色。我們可以為“li”元素添加以下樣式：

li {
margin: 0 10px;
background-color: #ddd;
padding: 5px 10px;
}

這將為菜單項添加5像素的上下填充和10像素的左右填充，同時也將為它們添加10像素的左右邊距和灰色的背景色。現在，我們已經成功地創建了一個簡單的Flexbox布局！