Flex换行模式下：让按钮在有可用空间时与首个Flex项同排

问题场景 #

段落文本为动态内容：

• 文本较短时，文本与按钮同行，符合预期
• 文本较长时，即便第二行仍有容纳按钮的空间，flex-wrap: wrap也会将按钮挤到单独一行

需求：只要某一行有空间容纳按钮，就将其与文本放在同一行；若无空间，则允许按钮移至单独一行。

原始代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div className="App" style="max-width: 150px; border: 1px solid red;">
      <div style="display: flex; flex-wrap: wrap;">
        <p style="text-align: left; margin: 0;">
          Hello This is a long paragraph
        </p>
        <button>Go</button>
      </div>
    </div>
  </body>
</html>

解决方案 #

修改flex项目的样式，让文本段落可以灵活收缩，同时固定按钮宽度：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <div className="App" style="max-width: 150px; border: 1px solid red;">
      <div style="display: flex; flex-wrap: wrap; align-items: flex-start;">
        <p style="text-align: left; margin: 0; flex: 1; min-width: 0;">
          Hello This is a long paragraph
        </p>
        <button style="flex-shrink: 0;">Go</button>
      </div>
    </div>
  </body>
</html>

关键修改说明 #

• 给段落标签添加 flex: 1：让段落优先占据容器剩余空间，同时允许在空间不足时收缩
• 添加 min-width: 0：打破flex项目默认的最小宽度限制，允许段落收缩到内容宽度以下，这样文本换行后，段落的实际宽度会适配内容，按钮就能填充到剩余空间中
• 给按钮添加 flex-shrink: 0：防止按钮被压缩变形，保证其宽度固定

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