如何用CSS根据父元素宽度自动将16个导航链接分为16×1/8×2/4×4布局？

我有一个包含16个链接的导航栏，需求如下：

• 桌面端屏幕：16个链接排成一行
• 窗口宽度缩小时：分为两行各8个链接
• 窗口宽度极窄时：呈现4×4网格布局

目前我需要硬编码父元素宽度，维护和更新难度很高，请问如何用CSS实现该效果？

不需要硬编码父元素宽度，用CSS媒体查询结合Grid或Flexbox就能实现自适应布局，以下是两种可行方案：

方案一：CSS Grid（推荐） #

Grid布局能直观控制列数，代码简洁易维护：

HTML结构 #

<nav class="navbar">
  <a href="#">br3f</a>
  <a href="#">dfee</a>
  <a href="#">xfef</a>
  <a href="#">33fv</a>
  <a href="#">vef3</a>
  <a href="#">f3rr</a>
  <a href="#">ber3</a>
  <a href="#">b4t3</a>
  <a href="#">nyjk</a>
  <a href="#">dsfj</a>
  <a href="#">rg4h</a>
  <a href="#">nlkg</a>
  <a href="#">gvre</a>
  <a href="#">berg</a>
  <a href="#">grgg</a>
  <a href="#">gr4g</a>
</nav>

CSS代码 #

/* 默认：极窄屏幕4×4网格 */
.navbar {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.5em;
  margin: 1em;
  border: 1px solid #000;
}

.navbar a {
  background: #ff0;
  text-align: center;
  padding: 0.5em;
}

/* 中等宽度：两行各8个（8列） */
@media (min-width: 500px) {
  .navbar {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* 桌面端：一行16个（16列） */
@media (min-width: 700px) {
  .navbar {
    grid-template-columns: repeat(16, 1fr);
  }
}

说明

• 用repeat()快速定义列数，1fr让每个链接自动平分父容器宽度
• 媒体查询的断点（500px、700px）可根据链接实际尺寸调整，确保切换时不会出现异常换行
• 如果需要固定链接宽度，把1fr换成固定值（如60px）即可，无需硬编码父容器宽度

方案二：Flexbox #

如果更习惯用Flexbox，也可以这样实现：

CSS代码 #

.navbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.5em;
  margin: 1em;
  border: 1px solid #000;
}

.navbar a {
  /* 极窄屏幕：4列，calc计算宽度时减去gap */
  flex: 1 1 calc(25% - 0.5em);
  background: #ff0;
  text-align: center;
  padding: 0.5em;
}

/* 中等宽度：8列 */
@media (min-width: 500px) {
  .navbar a {
    flex: 1 1 calc(12.5% - 0.5em);
  }
}

/* 桌面端：强制一行显示 */
@media (min-width: 700px) {
  .navbar {
    flex-wrap: nowrap;
  }
  .navbar a {
    flex: 1 1 auto;
  }
}

说明

• 通过flex-basis结合calc()控制每列宽度，实现自适应列数
• 桌面端禁用flex-wrap强制16个链接排成一行
• 同样无需硬编码父容器宽度，完全适配屏幕变化

内容的提问来源于stack exchange，提问作者AGamePlayer