Safari中同时使用column-count与flexbox出现内容错乱问题求解

当父容器使用column-count: 4实现多列布局，同时子容器设置display: flex时，Safari会错误地将flex容器拆分到不同列中，而Chrome能正常保持flex容器的完整性。以下是两种无需JavaScript的CSS解决方案：

方案一：用flex完全替代column-count布局 #

既然flex本身支持多列流式布局，直接抛弃column-count，用flex实现相同效果，兼容性更好：

/* 父容器 */
.multi-column-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem; /* 列与列之间的间距 */
}

/* 每个flex子容器 */
.flex-item-container {
  flex: 0 0 calc(25% - 0.9rem); /* 4列布局，减去gap的一半避免溢出 */
  display: flex;
  flex-direction: column; /* 根据需求设置flex方向 */
  /* 其他自定义样式 */
}

这种方式从根源上避免了column与flex的冲突，所有现代浏览器表现一致。

方案二：保留column-count，阻止flex容器被拆分 #

如果必须保留column-count布局，给每个flex子容器添加break-inside: avoid属性，强制Safari不将该容器拆分到多列：

/* 父容器 */
.multi-column-container {
  column-count: 4;
  column-gap: 1.2rem;
}

/* 每个flex子容器 */
.flex-item-container {
  display: flex;
  break-inside: avoid; /* 核心属性，防止容器被拆分 */
  -webkit-column-break-inside: avoid; /* 兼容旧版Safari */
  margin-bottom: 1.2rem; /* 容器之间的垂直间距 */
  /* 其他自定义样式 */
}

break-inside: avoid属于CSS Fragmentation规范，专门用于控制元素在分页、分栏时的拆分行为，Safari对该属性的支持良好。

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