响应式两列布局添加32px间距导致布局崩溃的解决方法

你的布局崩溃核心原因是.column同时混用了float: left和width: 50%，这和父容器的display: flex完全冲突。Flex布局下不需要float，固定的50%宽度加上gap后，总宽度会超过容器的100%，直接触发溢出或换行。

修复方案 #

移除.column中多余的float和width属性，仅保留flex:1，同时直接给父容器columns设置gap:32px即可：

.youtube-video {
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.column {
  flex: 1; /* 让列自动平分容器剩余空间 */
}

.columns {
  display: flex;
  gap: 32px; /* 直接设置32px列间距 */
}

原理说明 #

Flex布局中，flex:1会让每个.column自动占据父容器中扣除gap之后的均等空间，gap是flex容器的原生属性，会被自动纳入布局计算，不会导致总宽度溢出。而原来的width:50%是固定宽度，加上gap后总宽度必然超过100%，直接引发布局崩溃；float属性在flex容器内完全无效，还会干扰布局逻辑。

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