如何使用Flex布局实现测验问题纵向排列、图片居右并排展示？

问题原因 #

1. 你为.quizForm设置display: flex后，该容器的所有直接子元素（3个.quizQuestions元素+1个.quizImage元素）都会默认沿横向排列，这就是所有问题项横向排布的核心原因。
2. 你给.quizQuestions设置的flex-direction: row属于无效配置：flex-direction是flex容器的属性，无法作用于flex子元素，该规则可直接删除。

推荐解决方案（改动最小、可维护性最高） #

第一步：调整DOM结构，新增左侧问题包裹容器 #

把所有.quizQuestions元素套在同一个父容器内，让.quizForm的直接子元素仅保留「左侧问题区」和「右侧图片区」两个节点，实现两栏横向排列。

<div class="quizForm">
    <!-- 新增左侧问题包裹容器 -->
    <div class="quizQuestionsWrap">
        <div class="quizQuestions"></div>
        <div class="quizQuestions"></div>
        <div class="quizQuestions"></div>
    </div>
    <div class="quizImage"></div>
</div>

第二步：替换原有CSS代码 #

.quizForm {
  display: flex;
  gap: 20px; /* 可自定义左右两栏的间距 */
}

/* 左侧问题区占1份宽度 */
.quizQuestionsWrap {
  flex: 1;
}

/* 问题项默认纵向堆叠（块级元素默认独占一行，无需额外flex配置） */
.quizQuestions {
  margin-bottom: 16px; /* 可自定义问题项之间的上下间距 */
}

/* 右侧图片区占2份宽度 */
.quizImage {
  flex: 2;
  align-self: flex-start; /* 避免图片区高度被左侧问题区拉伸 */
  /* 如果需要滚动时图片固定在右侧可视区域，可新增以下两行 */
  /* position: sticky;
  top: 20px; */
}

无需修改DOM的兼容方案 #

如果不能调整现有DOM结构，可通过调整flex排序和宽度实现需求，但适配灵活性略低：

.quizForm {
  display: flex;
  flex-wrap: wrap;
}

.quizQuestions {
  width: 33.33%; /* 宽度占比对应flex:1的比例 */
  order: 0;
}

.quizImage {
  width: 66.67%; /* 宽度占比对应flex:2的比例 */
  order: 1;
}

内容的提问来源于stack exchange，提问作者Lara M.