Flexbox：元素折叠——最好的方法？

Question

考虑以下几点：

认为这是一个完整的 1920 像素屏幕。 A 中包含的文本和按钮的 div 是一个 flexbox。

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

最终，当没有更多空间可以挤压时，它会折叠成 C。

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

鉴于我正在使用 flexbox，我想知道这 - 添加填充 - 是否是实现此折叠的最佳、最有效的方法。

是否应该以不同的、更合适的方式来完成？

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/