Flexbox：元素崩溃-最好的方法？

Question

请考虑以下内容：

将其视为完整的1920像素屏幕。包含在 A 中看到的文本和按钮的div是一个flexbox。

调整屏幕大小时，文本和按钮会尽可能挤压-如 B 所示。

最终，当没有更多空间挤压时，它会塌陷为 C 。

现在，我添加了一个断点，以使 C 在1024px处生效，这意味着文本和按钮之间将有一些填充，因此永远不会粘在一起。为此，我添加了padding: 0 50px;。

考虑到我正在使用flexboxes，我想知道是否（添加填充）是实现此折叠的最好，最有效的方法。

这应该以其他更合适的方式完成吗？

class {
  display: flex;
  flex-direction: row;
  word-wrap: normal;
  text-align: center;
  justify-content: space-between;
  height: 100%;
  }
  @include breakpoint-max(1068px) {
    padding: 0 50px;
  }
}

谢谢！

Answer 1

尝试添加flex-wrap:wrap;。默认情况下为no-wrap。这就是元素压缩的原因。您可以在这里https://css-tricks.com/snippets/css/a-guide-to-flexbox/

了解更多信息