如何阻止Flexbox自动换行并实现等宽布局？

嘿，我懂你要做的这个面板样式，而且已经用Flexbox摸到门道了对吧？针对中间状态区域每个项要等宽且不换行的问题，我给你整理了一套可行的实现方案：

完整代码实现 #

<div class="panel-container">
  <!-- 左侧区域 -->
  <div class="left-section">
    <div>A</div>
    <div>16</div>
  </div>
  
  <!-- 中间状态区域 -->
  <div class="status-container">
    <div class="status-row">
      <div class="status-item">Ready 3</div>
      <div class="status-item">Not Ready 2</div>
    </div>
    <div class="status-row">
      <div class="status-item">Talking 4</div>
      <div class="status-item">Outbound 3</div>
    </div>
  </div>
  
  <!-- 右侧Total区域 -->
  <div class="right-section">
    <div>Total</div>
  </div>
</div>

/* 整个面板容器，水平排列，边框模拟分隔线 */
.panel-container {
  display: flex;
  align-items: center;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  padding: 8px 0;
  width: fit-content;
}

/* 左侧区域，垂直排列并居中对齐 */
.left-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

/* 中间状态容器，垂直排列，用边框分隔左右区域 */
.status-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

/* 每行状态项，水平排列占满容器宽度 */
.status-row {
  display: flex;
  width: 100%;
}

/* 核心配置：实现等宽+不换行 */
.status-item {
  flex: 1; /* 同一行的项平分可用宽度 */
  white-space: nowrap; /* 强制文本保持一行，不自动换行 */
  text-align: center; /* 文字居中，贴合目标样式 */
  padding: 0 8px;
}

/* 右侧区域，垂直排列并居中对齐 */
.right-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

关键逻辑说明 #

• 等宽实现：给每个状态项设置flex: 1，让它们自动平分所在行的可用宽度，不管文本长度差异都能保持一致宽度。
• 禁止换行：white-space: nowrap是防止文本折行的关键，确保"Ready 3"这类内容始终显示在一行。
• 整体对齐：外层容器用align-items: center让三个区域的内容垂直居中，完全匹配你想要的面板布局结构。

你可以根据需求调整边框样式、内边距数值，轻松适配自己的视觉风格~

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