仅当弹性项目达到最小宽度时才换行

Question

所以我有这个：

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex-wrap: wrap; ? I want this only when the children reach their min-width, to avoid horizontal scrolling */
}

.menu-title {
  flex-shrink: 0;
}

.menu-item {
  flex: 0 1 auto;
  min-width: 10rem;
}

.menu-link {
  padding: 0 1rem;
}


/* Demo purpose */

html,
body {
  margin: 0;
  padding: 0;
}

.menu {
  margin: 2rem;
}

.menu-title {
  margin-right: 1rem;
}

.menu-link {
  display: flex;
  position: relative;
  text-decoration: none;
  align-items: center;
}

.menu-icon {
  display: block;
  width: 2em;
  height: 2em;
  flex-shrink: 0;
  margin-right: 0.5em;
  background-color: #eee;
}

<div class="menu">
  <div class="menu-title">Menu:</div>
  <div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A menu entry</span></a></div>
  <div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A very very very very long menu entry that is should be on two lines</span></a></div>
  <div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A quite long menu entry</span></a></div>
  <div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A menu entry that is a bit longer</span></a></div>
</div>

<div class="menu">
  <div class="menu-title">Menu:</div>
  <div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A two items menu entry</span></a></div>
  <div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">I should have put some lerem ispum at a moment right?</span></a></div>
</div>

<div class="menu">
  <div class="menu-title">Menu:</div>
  <div class="menu-item"><a class="menu-link" href=""><span class="menu-icon"></span><span class="menu-text">A menu entry, but yeah you got it</span></a></div>
</div>

我希望 flex 项目与它们现在的行为完全一样：只有一行，在需要时缩小，所以文本在 2 行上，并在它们可以达到正常的“内联”宽度时增长。

但是它们有一个min-width，它会在某个点创建水平滚动。在这一点上，我希望最后一个换一行：我想要wrap行为，但不是在它们达到最小宽度之前，因为我希望它们之前缩小。

我设法让它工作的唯一方法是添加一个包裹.menu并允许项目增长，但是当只有一个项目时，渲染不正确（我仍然希望最大宽度为内容宽度）。 https://jsfiddle.net/joanva/9zgn3hcm/30/ （初始：https : //jsfiddle.net/joanva/9zgn3hcm/）

Answer 1

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

CSS 看起来像这样：

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

这会设置您的网格，以便它尝试“自动调整”列，在均匀间隔 (1fr) 和最小列宽 (10rem) 之间拉伸它们。如果它无法将内容放入一行，因为它们会低于最小宽度，那么它会将多余的内容移到新行上。

这是一个 jsfiddle 示例。您可以尝试手动添加一些额外的菜单项，看看会发生什么： https: //jsfiddle.net/547hq0Lb/4/

Answer 2

知道了！

设置.menu为包装，并允许项目增长 + 添加max-width: fit-content;使其成为可能。
内在尺寸有点前沿，但优雅降级 ftw。

https://jsfiddle.net/joanva/9zgn3hcm/33/