将flexbox容器缩小到内容大小

Question

如果您使用Flexbox布局来连续布局某些项目，则Flexbox容器占用其所在容器的整个宽度。如何将Flexbox容器设置为仅占用其宽度＆＃39 ; s子元素？

看看下面的例子：

https://jsfiddle.net/5fr2ay9q/

在此示例中，flexbox容器的大小超出子元素的宽度。修复此类问题的典型方法是display: inline但显然不会起作用，因为它不再是Flexbox容器。

是否可以这样做？

＆＃13;

＆＃13;

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

p {
  outline: 1px solid blue;
}

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用display: inline-flex;（请参阅Designating a Flexible Box）：

＆＃13;

＆＃13;

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

p {
  outline: 1px solid blue;
}

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;