强制某些 Flexbox 项目换行到新行中，否则不换行 [关闭]答案

【问题标题】：Force certain Flexbox items to wrap into a new row, while not wrapping otherwise [closed]强制某些 Flexbox 项目换行到新行中，否则不换行 [关闭]
【发布时间】：2021-02-02 07:51:58
【问题描述】：

我正在开发一个导航栏（在桌面布局中），它在一行中显示其所有元素。它永远不会包裹。我只是设置了flex-flow: row nowrap;，它工作正常：

现在在移动设备上，其中一些项目将放置在上方的第二行中，仅在悬停/单击底行时显示。到目前为止，我的进展是用.hide-on-mobile; 标记这些隐藏项目并在它们上设置order: 2; 和display: none;，以便始终显示的项目在前面。

我的计划是在最后一个 .hide-on-mobile 之后创建某种“换行符”，并将剩余的元素 flexwrap: wrap-reverse; 放在顶部。据我了解，使用伪元素可能会出现这样的“换行符”。

但我的主要问题是，我必须启用换行，这可能会弄乱导航栏。我的客户希望以后能够在导航栏上添加/删除项目。因此，将移动断点设置在发生此类换行之前并不是一个解决方案。

有没有一种方法可以在 flexbox 中创建手动换行，但要防止它自动换行？或者 flexbox 不是解决这个布局问题的合适方法？

【问题讨论】：

标签： html css layout flexbox

【解决方案1】：

我认为这是使用display: contents 的好案例。这个想法是将项目包装在 2 行中。在移动视图中，2 行将显示在另一行的顶部。在桌面视图中，感谢display: contents，所有项目都将拥有相同的父项。

当您将鼠标悬停在导航栏上时可见的演示 .hide-on-mobile 元素。

请注意，我使用按钮只是因为我不知道如何在 stackoverflow 代码 sn-p 上模拟响应式设计

// js code for the demo only (because I don't know how to simulate responsive view in stackoverflow code snippet)

document.getElementById('mobile').addEventListener('click', evt => {
    document.getElementById('nav').classList.toggle('mobile-view');
});

#nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.sub-nav {
  display: contents;
}


/* the code below should be a in media query  and the class .mobile-view should be removed */

#nav.mobile-view {
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
}

.mobile-view > .sub-nav {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.mobile-view > .hide-on-mobile {
  order: -1;
  display: none;
}

#nav.mobile-view:hover > .hide-on-mobile {
  display: flex;
}

<nav id=nav>
  <div class="sub-nav">
    <a href="#">ZEUTEN</a>
    <a href="#">About</a>
    <a href="#">Projects</a>
    <a href="#">Impressum</a>
    <a href="#">Architect</a>
  </div>
  <div class="sub-nav hide-on-mobile">
    <a href="#">1234567890</a>
    <a href="#">info@gmil.com</a>
    <a href="#">Teaching</a>
    <a href="#">CV</a>
  </div>
</nav>
<!-- only because I don't know how to simulate responsive view in stackoverflow code snippet -->
<button id="mobile">Toggle mobile view</button>

【讨论】：