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

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 should be on multiple 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">Lorem ispum would have done the job at some point</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 that is… 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

明白了！

设置

.menu

进行换行，并允许项目增长 + 添加

max-width: fit-content;

即可实现。
内在尺寸是有点尖端，但会优雅地退化。

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

Answer 2

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

CSS 看起来像这样：

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

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

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