如何实现三列左对齐？Flexbox方案是否有更优替代？

你担心Flexbox开销大其实没必要——现代浏览器对Flexbox的优化已经非常好，性能开销几乎可以忽略。不过如果想要更简洁或者语义更贴合的实现，这里有两个不错的替代方案：

方案一：HTML表格（推荐，语义化+代码简洁） #

你的内容是统计项与对应值的配对，属于表格型数据，用HTML原生表格实现不仅语义更准确，代码也更简洁，天然支持列对齐：

<style>
  table {
    margin: 0 auto; /* 居中整个表格，和你之前的justify-content:center效果一致 */
    border-collapse: separate;
    border-spacing: 10px 5px; /* 控制列间距和行间距，替代原来的span margin */
  }
</style>

<table>
  <tr><td>High</td><td>=</td><td>100</td></tr>
  <tr><td>Low</td><td>=</td><td>80</td></tr>
  <tr><td>Mean</td><td>=</td><td>94.29</td></tr>
  <tr><td>Median</td><td>=</td><td>100</td></tr>
  <tr><td>Mode</td><td>=</td><td>100</td></tr>
</table>

优势： #

• 语义完全匹配数据类型，对屏幕阅读器更友好
• 无需多层嵌套的div，代码结构更扁平
• 原生支持列对齐，无需额外布局属性

方案二：CSS Grid #

Grid是专门的二维布局方案，比Flexbox更适合这种固定列数的场景，代码同样简洁：

.stat-container {
  display: grid;
  grid-template-columns: auto auto auto; /* 三列自适应宽度 */
  gap: 10px; /* 列间距 */
  justify-content: center; /* 整体居中 */
  row-gap: 5px; /* 行间距 */
}

<div class="stat-container">
  <span>High</span><span>=</span><span>100</span>
  <span>Low</span><span>=</span><span>80</span>
  <span>Mean</span><span>=</span><span>94.29</span>
  <span>Median</span><span>=</span><span>100</span>
  <span>Mode</span><span>=</span><span>100</span>
</div>

优势： #

• 结构比Flexbox更简洁，不需要按列分组嵌套div
• 二维布局控制更直接，行/列间距用gap统一设置，无需给每个span加margin

补充说明 #

如果你的场景对性能极端敏感，表格和Grid的性能表现都和Flexbox不相上下——现代浏览器的布局引擎对这些CSS布局方式的优化都很成熟，不会有明显的性能差异。选择哪种方案主要看语义贴合度和代码维护成本，表格在这个场景下是最优解。

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