如何实现带换行文本的Flex项目收缩包裹并满足导航布局三需求？

我太懂这种纠结了——想让导航菜单项水平等间距分布、文本可换行节省横向空间、所有内容垂直居中，结果之前的方案要么顾此失彼，要么直接崩布局。其实用现代CSS布局就能一次性搞定这三个需求，不用再在table布局里钻牛角尖了！

问题根源 #

之前用display: table系列属性时，虽然能轻松实现垂直居中和等间距，但table-cell的布局逻辑是优先保证内容不被截断，所以文本会强行撑开容器导致溢出；而去掉table属性后，普通流又没法同时维持等宽分布和垂直居中，自然就出问题了。

方案1：Flexbox实现（适合固定数量的菜单） #

用Flexbox的弹性分配特性，既能让菜单项平分空间，又能保证文本换行和垂直居中：

.nav-container {
  display: flex;
  justify-content: space-between; /* 项与项之间自动分配空白，实现等间距 */
  align-items: center; /* 容器层面的垂直居中 */
  width: 100%;
  gap: 1rem; /* 可选：给项之间加最小间距，避免极端情况下挤在一起 */
}

.nav-item {
  flex: 1; /* 核心！让每个菜单项平分容器的可用宽度 */
  text-align: center; /* 文本水平居中，视觉更协调 */
  word-wrap: break-word; /* 强制长文本换行 */
  white-space: normal; /* 确保换行生效，覆盖可能的nowrap设置 */
  display: flex;
  align-items: center;
  justify-content: center; /* 双重保险：让菜单项内部的文本也垂直+水平居中 */
  min-height: 4rem; /* 给菜单设置最小高度，保证垂直居中的视觉稳定性 */
}

方案2：Grid实现（支持自适应换行，更灵活） #

如果你的菜单数量可能变化，或者希望容器变窄时菜单项自动换行成多行，Grid是更好的选择：

.nav-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自动适配：最小宽度100px，超过则平分空间 */
  align-items: center; /* 垂直居中 */
  gap: 1rem; /* 项之间的间距 */
  width: 100%;
}

.nav-item {
  text-align: center;
  word-wrap: break-word;
  white-space: normal;
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

为什么这两个方案能同时满足需求？ #

• 水平等间距：Flex的flex:1或Grid的1fr会让每个菜单项平分容器宽度，自然实现等距分布；
• 文本可换行：word-wrap: break-word和white-space: normal强制文本在容器宽度不足时换行，不会溢出；
• 垂直居中：容器的align-items: center加上菜单项内部的flex布局，确保不管文本行数多少，都能垂直居中。

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