Flexbox 走出它的容器

Question

我正在尝试制作一个包含 3 个元素的标题栏，第一个元素尽可能多地占用空间，而其他 2 个元素则尽可能多地占用。

 | title | button | button |

当标题部分太宽时会出现问题。它的内容不会换行，它只是将按钮推离屏幕。

让我用codepen演示一下。

https://codepen.io/anon/pen/bqrpVg

更新

我现在看到它正在工作，但是任何人都可以解释这些价值观如何实现我想要的，而不是仅仅告诉我解决方案，这样我就可以理解它。

原文由 Michael Baldry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这里的问题是您将按钮设置为缩小，同时明确告诉标题不要缩小。这意味着标题将占据所有空间。现在，如果您在标题上设置 flex: 1; 并删除 flex: 0 1 auto; 和 flex-basis: content; 从按钮中，它按预期工作：按钮始终显示并且标题已包装。

请参阅 修改后的 codepen 。

当您设置 flex: 1 0 auto; 时，您将启用弹性项目的增长（ 1 ）并禁用其收缩（ 0 ）。所以浏览器永远不会缩小标题元素以便为按钮腾出空间。

当使用 flex: 0 1 auto; 你告诉浏览器弹性项目并不重要，当没有足够的空间时，弹性项目应该缩小为其他元素腾出空间。

这是我的解决方案的作用：

• 它在标题上设置了 flex: 1; ，它告诉浏览器元素可以扩展和收缩；它还指示尽可能多地获取可用空间；
• flex 速记的默认值是 0 1 auto ，这并不是真正需要的；
• 最后， flex-basis: content 不被真正支持；看 这里。

原文由 Andrei V 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我为你创建了这个 Codepen：

https://codepen.io/anon/pen/JWyXQd

添加的代码：

 flex-shrink: 0;
flex-flow: row wrap;
justify-content: flex-end;
align-items: flex-end;

我不确定这正是你想要的，但这就是我收集的。

原文由 user7582130 发布，翻译遵循 CC BY-SA 3.0 许可协议