如何用Flexbox实现电商产品描述的垂直对齐（非Table方案）

你当前的需求是：用多个<p>标签展示电商产品信息时，让右侧描述内容沿垂直线对齐，不受左侧标签文字长度影响，且不使用Table实现。

你目前用Flexbox加gap的方案，因为每个<p>是独立的Flex容器，左侧<span>宽度随内容变化，导致右侧内容无法对齐。

解决方案（Flexbox实现） #

给每个<p>内的左侧标签<span>设置固定宽度（或基于内容的最小宽度），让所有左侧标签占据相同宽度，右侧内容自然对齐：

CSS代码

p {
  display: flex;
  gap: 16px; /* 可根据需求调整间距 */
  margin: 8px 0; /* 可选，增加行间距提升可读性 */
}

/* 左侧标签设置固定宽度，确保所有行左侧宽度一致 */
p span:first-child {
  flex: 0 0 120px; /* 固定宽度，根据实际标签长度调整 */
  text-align: right; /* 可选，让标签右对齐，视觉更整齐 */
}

HTML代码

<p><span>Material:</span> <span>18k Gold Plating</span></p>
<p><span>One:</span> <span>18k Plating</span></p>
<p><span>Twotwo:</span> <span>18k Yellow Plating</span></p>
<p><span>threethree:</span> <span>18k Gold Plating</span></p>
<p><span>Four:</span> <span>18k Gold</span></p>

补充方案（Grid布局，更灵活） #

如果不想手动设置固定宽度，想让左侧自动适配最长的标签文字，可以把所有描述项放在一个容器里，用Grid布局：

CSS代码

.product-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  row-gap: 8px;
}

HTML代码

<div class="product-info">
  <span>Material:</span> <span>18k Gold Plating</span>
  <span>One:</span> <span>18k Plating</span>
  <span>Twotwo:</span> <span>18k Yellow Plating</span>
  <span>threethree:</span> <span>18k Gold Plating</span>
  <span>Four:</span> <span>18k Gold</span>
</div>

这个方案会自动让第一列（标签列）适应最长的文字宽度，第二列（内容列）占剩余空间，完美实现对齐效果。

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