flexbox如何实现WordPress古腾堡两列布局始终同排无换行？

问题原因 #

• WordPress默认给.wp-block-columns容器设置了小屏幕下flex-wrap: wrap规则，空间不足时自动换列
• 列的flex属性未禁止收缩，空间不足时会被挤压甚至触发换行
• 你的HTML存在语法错误，column-2的class属性少了闭合双引号，会导致样式失效

修复代码 #

第一步：修复HTML语法错误 #

<div class="wp-block-columns">
  <div class="wp-block-column column-1" style="flex-basis:80%">
    <p>Column text1</p>
  </div>
  <!-- 原代码此处class少了闭合双引号，已修复 -->
  <div class="wp-block-column column-2" style="flex-basis:20%">
    <p>Column text 2</p>
  </div>
</div>

第二步：添加自定义CSS覆盖默认规则 #

/* 覆盖古腾堡列容器默认换行规则 */
.wp-block-columns {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100%;
  gap: 0; /* 可自定义列间距，不要设置过大避免挤压宽度 */
}

.column-1 {
  display: flex;
  justify-content: flex-start;
  flex: 0 0 80%; /* 强制占80%宽度，禁止伸缩 */
  padding-left: 0.5rem;
  /* 以下为可选配置，内容超宽时显示省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-2 {
  break-inside: avoid-column;
  display: flex;
  justify-content: flex-end;
  flex: 0 0 20%; /* 强制占20%宽度，禁止伸缩 */
  text-transform: uppercase;
  padding-right: 1rem;
  /* 可选超宽处理规则 */
  overflow: hidden;
  white-space: nowrap;
}

可选自适应方案 #

如果不需要固定80%/20%的比例，希望第二列宽度随内容自适应、第一列占剩余所有空间，可以把两个列的flex属性改成：

.column-1 {
  flex: 1 1 auto;
  /* 其余属性保留原有配置 */
}
.column-2 {
  flex: 0 0 auto;
  /* 其余属性保留原有配置 */
}

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