隨著移動設備的普及，Web 開發(fā)也不再只是面向桌面端的網站了。如今，我們需要確保我們的網站能夠適配各種屏幕尺寸和設備類型。這就導致了一種趨勢，那就是布局 CSS 的彈性布局。

下面是一個使用 CSS 彈性布局的導航案例：

HTML：
<nav class="navbar">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">商品</a></li>
<li><a href="#">個人中心</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</nav>
CSS：
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #222;
color: #fff;
padding: 1rem;
}
.navbar ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.navbar li {
margin: 0 1rem;
}
.navbar a {
color: #fff;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
transition: background-color 0.2s ease-in-out;
}
.navbar a:hover {
background-color: #444;
}

這段代碼創(chuàng)建了一個簡單的導航欄，具有以下特點：

• 導航欄采用了彈性布局，使其能夠適應各種屏幕尺寸；
• 導航欄顯示了一組鏈接，鏈接之間使用了空隙，以便用戶更加容易操作；
• 鼠標懸停在鏈接上時，鏈接的背景色會立即改變，以便用戶快速識別鏈接所在位置。

CSS 彈性布局是一種非常流行的前端開發(fā)技術，它可以為不同設備和屏幕尺寸的用戶提供更好的用戶體驗。我們可以使用彈性布局來創(chuàng)建各種各樣的網站元素，包括導航欄、表格、卡片等等。