响应式两栏列表式表格优化方案咨询

核心逻辑 #

不用写媒体查询硬卡断点，直接靠Flexbox的flex-wrap自动换行特性，结合内容自适应宽度的设置，让列表根据容器空间自动在两栏/单栏之间切换，同时搞定对齐需求。

完整代码 #

HTML

<ul class="adaptive-two-col-list">
  <li class="list-item">
    <span class="left-col">商品名称</span>
    <span class="right-col">¥89</span>
  </li>
  <li class="list-item">
    <span class="left-col">超长名称的高端定制款商品</span>
    <span class="right-col">¥2999</span>
  </li>
  <li class="list-item">
    <span class="left-col">配套小配件</span>
    <span class="right-col">¥19</span>
  </li>
</ul>

CSS

/* 重置列表默认样式 */
.adaptive-two-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* 每行作为Flex容器，允许自动换行 */
.list-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 桌面端自动左右对齐 */
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 8px; /* 单栏模式下两栏的垂直间距 */
}

/* 让列宽根据内容自适应，同时支持空间分配 */
.left-col, .right-col {
  flex: 1 1 min-content;
}

/* 可选：给左栏加个最小宽度，避免内容过窄时太挤 */
.left-col {
  min-width: 110px;
}

效果拆解 #

1. 自适应列宽：两栏宽度完全由内容决定，不会出现硬编码宽度导致的空出一大块或内容被截断的问题
2. 自动切换布局：当容器宽度放不下两栏内容时，自动折成单栏，完全不用写媒体查询
3. 对齐自动适配：桌面端两栏分别左右对齐，折叠成单栏后，右栏自动变成左对齐（因为占满了整行宽度，justify-content的左右对齐就失效了，文本默认左对齐）

进阶优化（可选） #

如果需要更精准控制换行的触发时机，可以用CSS容器查询（比视口媒体查询更贴合组件自身尺寸）：

/* 先给行容器开启容器查询上下文 */
.list-item {
  container-type: inline-size;
}

/* 当行容器宽度大于400px时，强制右栏右对齐（增强对齐控制） */
@container (min-width: 400px) {
  .right-col {
    text-align: right;
  }
}

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