html - 包装时，Inline-flex 不适合内容

<分区>

我有一个容器，里面有一个包含元素的内部 div。

<div class="container">
 <div class="inner">
  <span class="item">1</span>
 </div>
</div>

容器或内部 div 宽度不固定。容器可以调整大小。并且内部 div 应该始终适合它的内容。

应该发生的是，内部 div 应该始终在容器内居中。

当内部 div 中的元素不再适合容器时，它应该分成第二行。

我正在使用 display: flex 和 display: inline-flex 将内部 div 居中。但是当元素换行到第二行时，内部 div 占据了容器的宽度并且不再适合内容。因此，它不会以容器为中心。

这是一个fiddle目前的情况。

如何始终使内部 div 始终以容器为中心，同时保持内部 div 宽度动态。

预期结果:

最佳答案

添加:

.inner{margin: auto 15%;}

这将使内部 div 居中。

或者简单地设置你想要的宽度比例，例如

.inner{width: 80%;}

关于html - 包装时，Inline-flex 不适合内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47151725/

相关文章：

css - 是否有针对多个浏览器前缀的纯 CSS 解决方法？