Flexbox 超出其容器

Question

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

| title | button | button |

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

让我用codepen演示一下。

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

更新

我现在看到它起作用了，但是谁能解释这些价值观如何实现我想要的，而不仅仅是告诉我解决方案，所以我可以理解它。

Answer 1

我为你创建了这个 Codepen：

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

添加的代码：

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

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

Answer 2

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

请参阅修改后的代码笔。

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

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

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

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