创建适配flex-wrap状态的动态分隔线

要解决两个方块间分隔线在flex-wrap换行时自动切换横竖样式的问题，纯CSS就能搞定，无需JavaScript。下面是具体实现方案：

核心思路 #

• 利用第一个item的::after伪元素作为分隔线载体
• 通过flex-shrink: 0保证分隔线尺寸不会被Flex布局压缩
• 配合媒体查询（或容器查询）判断容器宽度，切换分隔线的宽高属性实现横竖样式切换

完整代码示例 #

HTML结构（无需改动） #

<div class="box">
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS 基础实现 #

.box {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #000;
  align-items: center; /* 单行时让分隔线垂直居中 */
}

.box .item {
  width: 100px;
  height: 100px;
  margin: 1rem;
}

.item:first-child {
  background: blue;
}

.item:last-child {
  background: red;
}

/* 默认垂直分隔线样式 */
.item:first-child::after {
  content: "";
  flex-shrink: 0; /* 禁止分隔线被压缩 */
  width: 2px;
  height: calc(100% - 2rem); /* 减去item上下margin高度，避免超出容器 */
  margin: 0 1rem;
  background-color: #ccc;
}

/* 当容器宽度不足以容纳两个元素+间距+分隔线时，切换为水平分隔线 */
@media (max-width: 266px) {
  /* 计算逻辑：100px*2 + 1rem*4 + 2px = 200px + 64px + 2px = 266px（1rem默认16px） */
  .item:first-child::after {
    width: calc(100% - 2rem); /* 减去item左右margin宽度 */
    height: 2px;
    margin: 1rem 0;
  }
}

更灵活的容器查询方案（推荐） #

如果项目支持容器查询（现代浏览器均已兼容），无需计算固定宽度，直接基于容器尺寸判断，适配性更强：

.box {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #000;
  align-items: center;
  container-type: inline-size; /* 声明容器查询的尺寸类型 */
}

/* ... 其他基础样式不变 ... */

/* 当容器宽度小于两个元素+间距+分隔线的总宽度时切换样式 */
@container (max-width: calc(200px + 4rem + 2px)) {
  .item:first-child::after {
    width: calc(100% - 2rem);
    height: 2px;
    margin: 1rem 0;
  }
}

这种方式下，无论item的尺寸、margin如何调整，只要容器宽度不足以容纳两个元素，分隔线就会自动切换为水平样式。

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