使用CSS flex创建自适应两列列表的布局问题求解

修正后可直接运行的代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <style>
    .list-container {
      list-style: none;
      padding: 0;
      display: grid;
      gap: 0 2rem;
      /* 核心自适应规则：自动计算列数，列宽最小为内容不折行宽度，最大平分容器宽度 */
      grid-template-columns: repeat(auto-fit, minmax(min(100%, max-content), 1fr));
    }
    .column-group {
      /* 恢复列内列表的项目符号和预留占位 */
      list-style: disc;
      padding-inline-start: 1.5em;
      margin: 0;
    }
    .column-group li {
      /* 单列时长文本自动折行 */
      overflow-wrap: break-word;
    }
    body {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <!-- 修正HTML结构：ul直接子元素只能是li，用li作为列容器，内部嵌套ul放实际列表项 -->
  <ul class="list-container">
    <li>
      <ul class="column-group">
        <li>1 Lorem, ipsum dolor sit amet consectetur adipisicing.</li>
        <li>2 Lorem, ipsum.</li>
      </ul>
    </li>
    <li>
      <ul class="column-group">
        <li>3 Lorem, ipsum.</li>
        <li>4 Lorem, ipsum dolor sit amet.</li>
      </ul>
    </li>
  </ul>
</body>
</html>

问题对应解决说明 #

1. 文本折行前自动切换单列，不依赖固定宽度媒体查询 #

• 核心思路：放弃固定flex: 50%的强制等分规则，把列的最小宽度阈值设为内容完全不折行所需的宽度（max-content）：容器宽度足够并排容纳两个列的不折行宽度时，保持两列等分；宽度不足时自动换行成单列。
• Grid实现最简洁：通过repeat(auto-fit, minmax(min(100%, max-content), 1fr))规则，auto-fit会根据可用宽度自动计算列数，minmax限制列宽范围，单列状态下会自动取容器宽度作为列宽最小值，长文本可以正常折行，不需要额外写white-space切换逻辑。
• 若必须用Flex实现，给列设置flex: 1 1 max-content; max-width: 50%即可，注意单列时需要覆盖max-width: 100%，实现逻辑比Grid繁琐，优先选择Grid方案。
• 原写法先折文本再换行的原因：Flex子项默认min-width: auto，取值为文本折到最长单词不拆分的最小宽度，会先压缩宽度触发文本折行，直到压到最小宽度才会换行，不符合预期。

2. 列表项目符号占位错位问题 #

• 先修复HTML结构错误：<ul>的直接子元素只能是<li>，原代码用<span>作为ul直接子元素包裹li不符合HTML规范，会导致列表渲染逻辑异常，项目符号位置计算错误。修正后用li作为列容器，内部嵌套独立ul放实际列表项即可。
• 之前calc写法不生效是语法错误：CSS calc()函数的加减运算符两侧必须加空格，calc(50%-10px)是无效写法，正确写法为calc(50% - 10px)。
• 符号占位适配方案：给内部嵌套的列表设置padding-inline-start: 1.5em预留项目符号位置，配合box-sizing: border-box让宽度计算包含内边距，不会出现宽度溢出错位。如果不需要外层列表的默认符号，直接给外层容器设list-style: none清除即可，避免额外占位干扰。

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