html – 将flexbox容器缩小到内容大小

概述参见英文答案 > What’s the difference between display:inline-flex and display:flex?                                    6个 如果您使用Flexbox布局来连续布局某些项目,则Flexbox容器会占用其所在容器的整个宽度.如何将Flexbox容器设置为仅占用其子元素的宽度？ 看一下下面的例子： 参见英文答案 > What’s the difference between display:inline-flex and display:flex?                                    6个
如果您使用FlexBox布局来连续布局某些项目,则FlexBox容器会占用其所在容器的整个宽度.如何将FlexBox容器设置为仅占用其子元素的宽度？

看一下下面的例子：

https://jsfiddle.net/5fr2ay9q/

在此示例中,flexBox容器的大小超出子元素的宽度.修复这样的东西的典型方法是显示：内联但显然不起作用,因为它不再是一个flexBox容器.

是否有可能做到这一点？

.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>

解决方法 你可以使用display：inline-flex; (见 Designating a Flexible Box)：

.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>

总结

以上是内存溢出为你收集整理的html – 将flexbox容器缩小到内容大小全部内容，希望文章能够帮你解决html – 将flexbox容器缩小到内容大小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。