如何在断点处将ul列表设为两列布局？能否用Flex实现？

需求说明 #

我需要在响应式断点（平板及以上尺寸）调整链接列表的布局，原本以为只能用Grid布局实现，想确认是否可以通过Flex布局完成需求：

• 当前布局：4个列表项按顺序排列，换行后仍依次向下
• 期望布局：在断点处，列表项分成两行两列，第一行显示「San Francisco」和「https://github.blog」，第二行显示「Not Available」和「@github」

现有代码 #

HTML #

<ul>
  <li class="contact__location">San Francisco</li>
  <li class="contact__link">
    <a href="https://github.blog">https://github.blog</a>
  </li>
  <li class="contact__twitter">Not Available</li>
  <li class="contact__company">@github</li>
</ul>

CSS #

@media screen and (min-width: $breakpoint-tablet) {
  display: flex;
  flex-wrap: wrap;
}

li {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  color: #4b6a9b;
}

Flex布局实现方案 #

完全可以用Flex布局实现，核心是通过控制列表项的宽度，让它们自动分组换行：

1. 补全父容器（<ul>）的Flex设置，确保样式作用对象正确
2. 给每个列表项设置flex: 0 0 50%（固定占满一行的50%宽度），配合flex-wrap: wrap实现两行两列的布局

修改后的CSS代码：

@media screen and (min-width: $breakpoint-tablet) {
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none; /* 可选，根据需求去掉默认列表样式 */
  }

  li {
    flex: 0 0 50%; /* 关键：每个列表项占50%宽度 */
    box-sizing: border-box; /* 防止内边距/外边距导致宽度溢出 */
    font-family: "Space Mono";
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 19px;
    color: #4b6a9b;
  }
}

如果需要更自定义的换行逻辑（比如指定某几个元素单独占一行），可以给对应列表项添加flex-basis: 100%强制换行，但针对你的需求，50%宽度的方式最简洁高效。

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