CSS flex-direction布局求助：交替设置.column子元素背景色

你的代码仅配置了Flex布局的排列方向，缺少背景色的样式定义，而且全局给.column设置flex-direction:row-reverse会让所有列的子元素顺序反转，反而打乱你期望的内容对应关系。

要实现需求，只需针对不同位置的.column下的.left和.right设置对应背景色即可，不需要额外反转Flex方向。

修正后的完整代码 #

<style>
.wrap {
  display: flex;
}
.column {
  display: flex;
  /* 移除不必要的row-reverse，保持原有内容顺序 */
}
/* 第一个.column下的样式 */
.column:nth-child(1) .left {
  background-color: blue;
  color: white; /* 加白色文字提升可读性 */
}
.column:nth-child(1) .right {
  background-color: red;
  color: white;
}
/* 第二个.column下的样式 */
.column:nth-child(2) .left {
  background-color: red;
  color: white;
}
.column:nth-child(2) .right {
  background-color: blue;
  color: white;
}
/* 可选：给子元素加内边距优化视觉效果 */
.column > div {
  padding: 8px 16px;
}
</style>

<div class="wrap">
    <div class="column">
        <div class="left">Blue Background</div>
        <div class="right">Red Background</div>
    </div>
    <div class="column">
        <div class="left">Red Background</div>
        <div class="right">Blue Background</div>
    </div>
</div>

关键说明 #

• 使用:nth-child(n)选择器精准定位第1、第2个.column容器，避免给所有同类别元素设置统一样式。
• 移除多余的flex-direction:row-reverse，你的HTML结构已经对应了期望的内容顺序，无需反转排列。
• 添加白色文字和内边距是优化视觉体验的可选操作，可根据需求调整。

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