将flexbox容器压缩到内容大小[复制]

This question already has an answer here:

这个问题已经有了答案:

• Difference between display:inline-flex and display:flex 6 answers
• 显示的区别:inline-flex和display:flex 6答案

If you are using a Flexbox layout to layout some items in a row, the Flexbox container takes up the full width of whatever container it is in. How do you set the Flexbox container to only take up the width of it's child elements?

如果您正在使用Flexbox布局来将某些项目排列成一行，那么Flexbox容器将占据其所在容器的整个宽度。如何设置Flexbox容器只占用它的子元素的宽度?

Take a look at the following example:

看看下面的例子:

https://jsfiddle.net/5fr2ay9q/

https://jsfiddle.net/5fr2ay9q/

In this example the size of the flexbox container extends beyond the child element's width. The typical way to fix something like this is display: inline but obviously that won't work because then it's not a flexbox container anymore.

在本例中，flexbox容器的大小超出了子元素的宽度。典型的解决方法是显示:内联，但很明显这不会起作用，因为它不再是一个flexbox容器。

Is it possible to do this?

有可能这样做吗?

.container {
  display: flex;
  flex-direction: row;
  outline: 1px solid red;
}

p {
  outline: 1px solid blue;
}

Can you make the flex container not 100% width but rather the width of the content itself?

<div class='container'>
  <img src='https://placehold.it/300x300'/>
  <p>
    This is some content hello world testing 123.
  </p>
</div>

1 个解决方案

#1

You can use display: inline-flex; (see Designating a Flexible Box):

可以使用display: inline-flex;(见指定弹性箱):

.container {
  display: inline-flex;
  flex-direction: row;
  outline: 1px solid red;
}

p {
  outline: 1px solid blue;
}

Can you make the flex container not 100% width but rather the width of the content itself?

<div class='container'>
  <img src='https://placehold.it/300x300'/>
  <p>
    This is some content hello world testing 123.
  </p>
</div>