如何用Flex将网站页脚单列Club Links拆分为同标题两列？

方法1：修正Flex布局实现 #

如果想用flex完成需求，核心是给链接容器开启自动换行，并让每个链接项占据50%宽度，就能自动分成两列：

<!-- HTML结构 -->
<footer>
  <div class="club-links-container">
    <h3>Club Links</h3>
    <ul class="club-links-list">
      <li><a href="#">链接1</a></li>
      <li><a href="#">链接2</a></li>
      <!-- 补充剩余18个链接 -->
      <li><a href="#">链接20</a></li>
    </ul>
  </div>
</footer>

/* CSS样式 */
.club-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* 可选，设置链接间的间距 */
}

.club-links-list li {
  width: calc(50% - 6px); /* 减去gap的一半，保证间距均匀 */
  box-sizing: border-box;
}

方法2：Grid布局（更简洁直观） #

用Grid实现两列布局代码更简洁，直接指定列数即可：

.club-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

方法3：手动拆分列表（严格控制每列10个） #

如果需要确保每列固定10个链接，不受屏幕尺寸影响，建议把20个链接拆成两个列表，再用flex或grid排列：

<footer>
  <div class="club-links-container">
    <h3>Club Links</h3>
    <div class="links-columns">
      <ul class="column-list">
        <li><a href="#">链接1</a></li>
        <!-- 补充到链接10 -->
      </ul>
      <ul class="column-list">
        <li><a href="#">链接11</a></li>
        <!-- 补充到链接20 -->
      </ul>
    </div>
  </div>
</footer>

.links-columns {
  display: flex;
  gap: 24px; /* 两列之间的间距 */
}

.column-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1; /* 让两列宽度均等 */
}

以上三种方法都能实现你需要的两列布局，可根据实际需求选择适配方案。

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