强制某些 Flexbox 项目换行到新行中，否则不换行

Question

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

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

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

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

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

Answer 1

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

用于演示 .hide-on-mobile 悬停导航栏时可见的元素。

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

// js code for the demo only (because I don't know how to simulate responsive view in Whosebug 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 Whosebug code snippet -->
<button id="mobile">Toggle mobile view</button>

强制某些 Flexbox 项目换行到新行中，否则不换行

Force certain Flexbox items to wrap into a new row, while not wrapping otherwise

html

css

layout

flexbox