Css 仅当柔性项目达到其最小宽度时才进行包裹

所以我有这个：

菜单{
显示器：flex；
对齐项目：居中；
证明内容：中心；
/*柔性包装：包装；→ 我只想在孩子们达到最小宽度时才这样做，以避免水平滚动*/
}
.菜单标题{
弹性收缩：0；
}
.菜单项{
flex:01自动；
最小宽度：10雷姆；
}
.菜单链接{
填充：0 1rem；
}
/*演示目的*/
html，
身体{
保证金：0；
填充：0；
}
.菜单{
保证金：2rem；
}
.菜单标题{
右边距：1rem；
}
.菜单链接{
显示器：flex；
位置：相对位置；
文字装饰：无；
对齐项目：居中；
}
.菜单图标{
显示：块；
宽度：2米；
高度：2米；
弹性收缩：0；
右边距：0.5em；
背景色：#eee；
}

菜单：
菜单：
菜单：

您所描述的是网格的完美用例

css看起来像这样：

.menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 1rem;
}

这将设置网格，以便它尝试“自动拟合”列，在等距（1fr）和最小列宽（10rem）之间拉伸它们。如果它不能将内容放在一行上，因为它们会低于最小宽度，它会将多余的内容移到新行上

下面是一个JSFIDLE示例。您可以尝试手动添加一些额外的菜单项，看看会发生什么：

明白了

将

.menu

设置为包装，并允许项目增长+添加

最大宽度：适合内容成功。

固有大小仅为ftw

Flex wrap可打开或关闭……没有条件选项可用。鉴于内联框的性质，我怀疑您想要的是不可能的@Paulie_感谢您的编辑和帮助。事实上，有一些东西接近我试图实现的，但它打破了宽度（添加到帖子中）。我修改了你的提琴以使用网格：但无法回避新行遵守列宽的问题。您可能无法使用纯css做您想做的事情。（编辑：仍然需要整理内部内容的对齐问题）在网上搜索数小时直到我找到这个，谢谢你，先生，这真的是答案。