Html 如何使所有项目在二维上收缩到最大的项目内容？

在下面的示例中，我希望将所有项目设置为最大内容的宽度（例如项目5）

• 列表中的项目数是动态的，可能有100个 是的

• 每个项目内容的宽度也是动态的

• 每行中的项目数量将根据项目的宽度而变化 集装箱

所需输出

注意：媒体查询不适用于我的场景

---

使用CSS FLEX

Flex

被认为是一维的。这意味着它可以在单个轴（行）上实现所需的结果，除非内容小于可用空间

非包装示例（单行）

.container{
显示器：flex；
}
.项目{
背景：#58c；
文本对齐：居中；
空白：nowrap；
利润率：0 10px 10px 0；
弹性：1；
}

1.
2.
3.
4.
5是更长的
6.
7.
8.

这似乎是CSS网格应该能够处理的问题。但是我在规范中没有看到任何提供解决方案的东西。我并不是说它不存在，无论是作为一个简单的命令还是规则的组合。我只是没有找到它（如果它存在的话）

这是我能得到的最接近的结果：

.container{
显示：网格；
网格自动列：最小内容；/*最大内容也有效*/
栅隙：10px；
}
.项目{
背景：#58c；
文本对齐：居中；
空白：nowrap；
}

1.
2.
3.
4.
5是更长的
6.
7.
8.
9
10

如果没有JS，你就无法做到这一点

使用JS，您可以计算最大宽度并将其设置为所有元素

之后，将所有子元素显示为

inline block

inside

block

parent div

var max=document.querySelector（'.container.item'）.offsetWidth；
var styles='.container.item{width:'+max+'px；}'；
var styleSheet=document.createElement（“样式”）；
styleSheet.type=“text/css”；
styleSheet.innerText=样式；
document.head.appendChild（样式表）；
document.querySelector（'.container.init'）.classList.remove（'init'）
.container.init{
显示：内联块；
最大高度：100px；
可见性：隐藏；
}
.容器.物品{
显示：内联块；
背景：#58c；
文本对齐：居中；
空白：nowrap；
利润率：0 10px 10px 0；
}
.container.init.item{
显示：块；
}

1.
2.
3.
4.
5是有史以来最长的文本
6.
7.
8.
如果不是完全相同的问题，则可能重复：@Temaniaf。我想澄清一下我的问题。我知道，这就是为什么我只是简单地把它当作一个可能的重复，我没有结束它，因为这是一个相关的问题，不能给你一些答案ideas@TemaniAfif起初我以为这是解决方案，但我这里的主要问题是项目数量未知。有什么想法吗？对于纯CSS，我对此一无所知，对于一行布局来说很容易，但是对于多行布局，我不知道我们是否能做到it@Micheal_B谢谢你的洞察力。这就是我昨天读到的全部规范。我原以为这很简单，但用网格似乎无法实现。@DreamTeK在这种情况下，脚本的执行顺序很重要。编辑我的代码后丢失的内容。人们盲目地在头脑中复制脚本代码，他们不会为他们工作。