Html 使列内容宽度，而不是宽度：100%

我将

flex-direction:column

和

flex-wrap:wrap

放在

ul

中以实现列

如果

ul

将元素拆分为几列，则它们的宽度为列中最宽的

li

内容。但如果只有一列，则它的宽度为100%

我想要的是让这一栏有它的内容大小

/*样板文件*/
* {
保证金：0；
填充：0；
}
div{
最大高度：100px；
背景色：#cacaca；
}
保险商实验室{
列表样式类型：无；
高度：100px；
背景色：#达达达；
}
李{
右边距：10px；
背景色：#eaeaea；
}
/*实际代码*/
div{}
保险商实验室{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
对齐内容：居中对齐；
}
li{}

正常的
x
y
z
短
a
b
c
将会
一,
二,
三,
正常的
只有两个


为什么
满满的
宽度

使用

display:flex

而不是

display:inline flex

这将容器从块级别（采用其父级的全宽度）切换到内联级别（采用其内容的宽度）

此大小调整行为类似于

display:block

与

display:inline block

或

使用

justify content:center

使父div成为flex容器

这将

ul

flex容器限制为flex项的宽度，其默认值为

flex-basis:auto

（内容宽度）

/*样板文件*/
* {
保证金：0；
填充：0；
}
div{
最大高度：100px；
背景色：#cacaca；
}
保险商实验室{
列表样式类型：无；
高度：100px；
背景色：#达达达；
}
李{
右边距：10px；
背景色：#eaeaea；
}
/*实际代码*/
div{
显示：flex；/*新*/
对齐内容：中心；/*新建*/
}
保险商实验室{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
对齐内容：居中对齐；
}
li{}

正常的
x
y
z
短
a
b
c
将会
一,
二,
三,
正常的
只有两个


为什么
满满的
宽度

对不起，我不理解你说的话want@CedricGourville第二个

ul

是100%宽的，我希望它和里面的内容一样宽。当我尝试这样做时，奇怪的事情发生了：第一个

ul

被切成两半-屏幕外的一半，左边缘的另一半。你是对的。在你的情况下，有一个更好的解决方案。让父容器成为flex容器。第二种方法解决了我的问题。非常感谢。我刚刚在Firefox和Chrome中测试了问题代码笔，在Firefox上它马上就可以工作了，但在Chrome中我必须应用你的想法。