如何让Flex布局中的button项换行，同时保持Block Title与图片同行？

核心修改思路 #

1. 调整容器垂直对齐方式，避免按钮被强制居中
2. 让内容块占据剩余水平空间，确保与图片始终并排
3. 利用宽度设置让按钮容器自动换行到底部

修改后的代码 #

CSS部分

body {
  margin: 0;
  padding: 0;
}

.container {
  background-color: grey;
  overflow: auto;
  padding: 20px;
  display: flex;
  position: relative;
  column-gap: 15px;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-start; /* 改为顶部对齐，允许按钮自然下沉 */
}

.logo-image {
  align-self: flex-start;
}

.content {
  flex: 1; /* 占据图片外的所有水平空间，确保与图片并排 */
  min-width: 200px; /* 可选：避免极端窄屏时内容挤压变形 */
}

.headline {
  color: white;
  margin-top: 0; /* 移除默认margin，让标题与图片顶部对齐更整齐 */
}

.text {
  color: white;
  font-size: 16px;
  margin-bottom: 20px;
}

.btn {
  width: 100%; /* 确保按钮容器占据整行，自动换行到底部 */
}

button {
  background-color: black;
  color: white;
  width: 100%;
  padding: 10px;
  border: none;
  justify-content: center;
  align-items: center;
  margin: 0;
}

HTML部分（保持原结构无新增包裹）

<div class="container">
  <img src="download.png" width="50px" class="logo-image" alt="img" />
  <span class="content">
        <h4 class="headline">
          Block Title
        </h4>
        <p class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
          aliquid sit, cupiditate
        </p>
      </span>
  <div class="btn">
    <button>link</button>
  </div>
</div>

关键说明 #

• 移除.container的align-items: center，改用align-items: flex-start：避免按钮被强制垂直居中，让按钮容器可以自然排列到内容下方
• 给.content添加flex: 1：让内容块占据图片之外的所有可用水平空间，确保在flex-wrap: wrap模式下，内容块不会与图片换行，始终保持在图片右侧
• .btn的width: 100%：强制按钮容器占据整行宽度，自动触发换行，固定在容器底部

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