如何实现Flexbox布局下图文并排及响应式上下排列？

问题原因 #

• 你当前的.flex-container设置了flex-direction: column，这会强制所有子元素垂直堆叠，这就是文字在图片下方的核心原因。
• 图片上的float: right在Flex布局里完全多余，反而可能干扰布局，建议移除。

修正后的完整代码 #

CSS部分

.flex-container {
  display: flex;
  /* 桌面端用row实现横向并排 */
  flex-direction: row;
  width: 80%;
  margin: auto;
  background: #f2f2f2;
  padding: 0 25px;
  box-shadow: 0.1rem 0.1rem 0.2rem 0 rgb(0 0 0 / 40%);
  font-size: 1.125rem;
  min-height: 375px;
  border: 1px solid rgba(127, 127, 127, 1);
  align-items: flex-start; /* 让子元素顶部对齐，避免不必要的拉伸 */
  gap: 20px; /* 给图文区块之间加间距，替代原图片的padding-left */
}

.flex-item1 img {
  max-width: 100%; /* 确保图片不会超出容器范围 */
}

.flex-item2 {
  flex: 1; /* 让文字区块自动填充剩余空间，布局更均衡 */
}

/* 响应式适配：屏幕宽度小于768px时切换为垂直布局 */
@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }
}

HTML部分

<div class="flex-container">
  <div class="flex-item1">
    <img src="/image1.png">
  </div>
  <div class="flex-item2">
    <h2>Test</h2>
    <ul>
      <li>Test1</li>
      <li>Test2</li>
      <li>Test3</li>
      <li>Test4</li>
      <li>Test5</li>
    </ul>
  </div>
</div>

关键修改说明 #

• 将flex-direction: column改为row，实现桌面端图文横向并排。
• 用gap控制区块间距，替代原图片的内边距，布局更规整可控。
• 给文字区块添加flex: 1，让其自动填充剩余空间，避免宽度不足导致内容挤压。
• 新增媒体查询，在小屏幕设备下切换回垂直布局，满足响应式需求。
• 移除了多余的<p>标签和float样式，简化HTML结构。

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