Question

我试图制作一个标题栏，其中有3个元素，第一个占用尽可能多的空间，而另外2个占用尽可能多的空间。

| title | button | button |

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

让我用codepen演示。

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

更新

我认为它现在正在运作，但是任何人都可以解释这些值是如何实现我想要的，而不仅仅是告诉我解决方案，所以我能理解它。

Answer 1

这里的问题是您将按钮设置为缩小，同时明确告知标题不缩小。这意味着标题将抓住所有空间。现在，如果您在标题上设置flex: 1;并从按钮中删除flex: 0 1 auto;和flex-basis: content;，则按预期工作：始终显示按钮，并且包含标题的内容。< / p>

请参阅the modified codepen。

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

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

以下是我的解决方案：

它在标题上设置flex: 1;，告诉浏览器该元素可以展开并且可以缩小;它还指示尽可能多地占用可用空间;
flex速记的默认值为0 1 auto，这不是真正需要的;
最后，flex-basis: content并不真正受到支持;见here。

Answer 2

我为您创建了此Codepen：

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

已添加代码：

...
      </FulfillmentData>
      <Item>
           <AmazonOrderItemCode>ABC</AmazonOrderItemCode>
           <Quantity>1</Quantity>
      </Item>
      ... (repeat for each item in this delivery)
      <Item>
           <AmazonOrderItemCode>XYZ</AmazonOrderItemCode>
           <Quantity>1</Quantity>
      </Item>
    </OrderFulfillment>
...

我不确定这究竟是你想要的，但这就是我收集的内容。

Answer 3

从按钮中删除所有属性。只需在容器上使用display：flex。就是这样。

.container {
  width: 70%;
  background-color: #00f;
  display: flex;

}

.title {
  background-color: #f00;
  margin-right: 1rem;}

.button {
  background-color: #0f0;
  margin-right: 1rem;}

https://codepen.io/hunzaboy/pen/PpKNBm

Flexbox越过其容器

3 个答案: