如何实现基于内容收缩、平均尺寸扩展的CSS Grid/Flex导航栏

核心实现方案 #

通过CSS Grid结合minmax()属性，搭配文本溢出处理规则，可精准匹配你提出的三个布局需求：

.navbar {
  display: grid;
  /* 关键规则：每列最小为自身内容最小宽度，最大为平均分配的可用空间 */
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
  gap: 0.5rem;
  padding: 0.5rem;
  background: #f0f0f0;
}

.navbar-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.5rem 1rem;
  background: #fff;
  border-radius: 4px;
}

需求匹配拆解 #

1. 空间足够容纳所有项最大内容宽度时，均等分配
   当容器宽度大于所有项max-content的总和时，1fr会强制每列平均分配可用空间，所有项宽度完全一致，满足需求1。

2. 空间足够容纳所有项最小内容宽度时，按内容收缩
   当容器宽度缩小到小于总max-content但大于总min-content时，每列会自动收缩到自身内容的实际宽度（介于min-content和max-content之间），不会强制平均分配，满足需求2。

3. 空间不足容纳所有最小内容宽度时，优先收缩大项
   当容器宽度继续缩小到小于总min-content时，内容较长的项会先触发text-overflow: ellipsis开始收缩（因其min-content本身更大），直到和其他项的收缩后尺寸一致，之后所有项同步收缩并显示省略号，满足需求3。

测试示例 #

<div class="navbar">
  <div class="navbar-item">首页</div>
  <div class="navbar-item">我的订单</div>
  <div class="navbar-item">用户中心设置</div>
  <div class="navbar-item">帮助与反馈中心</div>
</div>

调整容器宽度即可触发三种状态切换：

• 宽屏状态：四个项宽度完全一致；
• 中等宽度：项宽度随内容长短自然变化；
• 窄屏状态：最长项先显示省略号，继续缩小后所有项同步收缩并显示省略号。

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