如何在屏幕resize时将行布局转为网格布局，无JS优先用Flexbox或Bootstrap

完全可以不使用JavaScript实现该需求，无论是原生Flexbox还是Bootstrap工具类都可以满足要求。

原生Flexbox方案 #

• 宽屏默认状态下给容器设置flex-wrap: nowrap强制单行排布，用:not(:last-child)::after伪元素生成相邻链接之间的竖线分隔，自动隐藏末尾多余的竖线。
• 用容器查询@container或者传统媒体查询设置布局触发阈值，当容器/屏幕宽度不足时，给容器开启flex-wrap: wrap，每个链接宽度设置为50%（扣除间距宽度），自动形成2行2列布局，同时隐藏竖线分隔、展示水平分隔线。
• 3个链接的特殊适配用CSS选择器即可实现：匹配.item:nth-last-child(3):last-child选中第三个链接，设置宽度为100%即可让它占满整行。
• 水平分隔线可以通过容器的border-top或者第二个链接的border-bottom实现，只在多行布局下生效。

Bootstrap适配方案 #

不需要自定义太多CSS，直接用Bootstrap自带的工具类即可快速实现：

• 宽屏状态给容器加d-flex flex-nowrap gap-*类，竖线分隔结合Bootstrap的border工具类和伪元素实现。
• 小屏断点下自动切换flex-wrap，链接统一加col-6类，通过CSS选择器匹配到第3个链接时自动覆盖为col-12即可。
• 水平分隔线直接用Bootstrap自带的border-top/border-bottom类，在小屏断点下生效。

<div class="link-container">
  <a href="#" class="link-item">Link one</a>
  <a href="#" class="link-item">Link two</a>
  <a href="#" class="link-item">Link three</a>
  <!-- 可按需增减链接数量 -->
</div>

.link-container {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  container-type: inline-size;
}
/* 单行状态竖线分隔 */
.link-item:not(:last-child)::after {
  content: "|";
  margin-left: 12px;
  color: #aaa;
}
.link-item {
  white-space: nowrap;
  text-decoration: none;
}

/* 宽度小于600px时触发多行布局，阈值可按需调整 */
@container (max-width: 600px) {
  .link-container {
    flex-wrap: wrap;
    gap: 0;
    row-gap: 12px;
  }
  .link-item {
    width: calc(50% - 6px);
    padding-block: 12px;
  }
  /* 隐藏竖线分隔 */
  .link-item::after {
    display: none;
  }
  /* 两行之间的水平分隔线 */
  .link-item:nth-child(2) {
    border-bottom: 1px solid #aaa;
  }
  /* 3个链接时第三个占满整行 */
  .link-item:nth-last-child(3):last-child {
    width: 100%;
    border-top: 1px solid #aaa;
    border-bottom: 0;
  }
}

如果需要兼容不支持容器查询的旧浏览器，把@container替换为对应宽度的@media媒体查询即可。

内容的提问来源于stack exchange，提问作者Jan Horčička