编辑“︁CSS弹性收缩（flex-shrink）”︁（章节）

=== 响应式导航栏 ===
在响应式设计中，导航栏的菜单项可能需要在小屏幕上收缩。以下是一个示例：

<syntaxhighlight lang="html">
<nav class="navbar">
  <a href="#" class="nav-item">首页</a>
  <a href="#" class="nav-item">产品</a>
  <a href="#" class="nav-item">关于我们</a>
  <a href="#" class="nav-item nav-logo">LOGO</a>
  <a href="#" class="nav-item">联系</a>
</nav>
</syntaxhighlight>

<syntaxhighlight lang="css">
.navbar {
  display: flex;
  width: 100%;
  max-width: 800px;
}

.nav-item {
  flex-basis: 200px;
  flex-shrink: 1;
  padding: 10px;
  text-align: center;
}

.nav-logo {
  flex-shrink: 0; /* LOGO不收缩 */
}
</syntaxhighlight>

'''效果：'''
* 在小屏幕上，普通导航项会收缩，但LOGO保持原始大小。