具有动态内容的Flexbox响应式超级菜单

Question

我正在创建一个大型动态导航菜单，我希望看起来像这样：

[----------- 100% PAGE WIDTH -----------] | GROUP A | GROUP C | GROUP F | GROUP G | | item | item | item | item | | item | | item | item | | | GROUP D | item | item | | GROUP B | item | item | | | item | | | | | item | GROUP E | | | | | item | | | |---------------------------------------| | | | | [------------- END OF PAGE -------------]

请参阅我的JS小提琴示例 。

 * { padding: 0; margin: 0; } body { background: #ccc; font-family: helvetica, arial; color: #444; } ul { list-style: none; } .mega-menu { display: flex; flex-direction: column; flex-wrap: wrap; padding: 15px; height: 50vh; background: #fff; } .mega-menu > li { display: flex; flex-direction: column; font-size: .7rem; padding-bottom: 15px; } .title { font-size: .7rem; font-weight: bold; line-height: 1; padding-bottom: 5px } 

 <ul class="mega-menu"> <li> <a class="title">News</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Shows</a> <ul> <li>HBO</li> <li>CBS</li> <li>NBC</li> <li>CNN</li> </ul> </li> <li> <a class="title">Topics</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Shows</a> <ul> <li>CBS</li> <li>NBC</li> </ul> </li> <li> <a class="title">Networks</a> <ul> <li>HBO</li> <li>CBS</li> <li>NBC</li> <li>CNN</li> </ul> </li> <li> <a class="title">Groups</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Sections</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Pilots</a> <ul> <li>HBO</li> <li>CBS</li> <li>NBC</li> </ul> </li> <li> <a class="title">Locations</a> <ul> <li>Denver</li> <li>Baltimore</li> <li>LA</li> <li>New York</li> <li>San Francisco</li> <li>New Orleans</li> <li>Jacksonville</li> <li>Calvery</li> <li>August</li> </ul> </li> <li> <a class="title">Cities</a> <ul> <li>Denver</li> <li>Baltimore</li> <li>LA</li> <li>New York</li> <li>San Francisco</li> <li>New Orleans</li> <li>Jacksonville</li> <li>Calvery</li> <li>August</li> </ul> </li> <li> <a class="title">News</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Shows</a> <ul> <li>HBO</li> <li>CBS</li> <li>NBC</li> <li>CNN</li> </ul> </li> <li> <a class="title">Topics</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Shows</a> <ul> <li>CBS</li> <li>NBC</li> </ul> </li> <li> <a class="title">Networks</a> <ul> <li>HBO</li> <li>CBS</li> <li>NBC</li> <li>CNN</li> </ul> </li> <li> <a class="title">Groups</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Sections</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Pilots</a> <ul> <li>HBO</li> <li>CBS</li> <li>NBC</li> </ul> </li> <li> <a class="title">Locations</a> <ul> <li>Denver</li> <li>Baltimore</li> <li>LA</li> <li>New York</li> <li>San Francisco</li> <li>New Orleans</li> <li>Jacksonville</li> <li>Calvery</li> <li>August</li> </ul> </li> <li> <a class="title">Cities</a> <ul> <li>Denver</li> <li>Baltimore</li> <li>LA</li> <li>New York</li> <li>San Francisco</li> <li>New Orleans</li> <li>Jacksonville</li> <li>Calvery</li> <li>August</li> </ul> </li> <li> <a class="title">News</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Shows</a> <ul> <li>HBO</li> <li>CBS</li> <li>NBC</li> <li>CNN</li> </ul> </li> <li> <a class="title">Topics</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Shows</a> <ul> <li>CBS</li> <li>NBC</li> </ul> </li> <li> <a class="title">Networks</a> <ul> <li>HBO</li> <li>CBS</li> <li>NBC</li> <li>CNN</li> </ul> </li> <li> <a class="title">Groups</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Sections</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Pilots</a> <ul> <li>HBO</li> <li>CBS</li> <li>NBC</li> </ul> </li> <li> <a class="title">Locations</a> <ul> <li>Denver</li> <li>Baltimore</li> <li>LA</li> <li>New York</li> <li>San Francisco</li> <li>New Orleans</li> <li>Jacksonville</li> <li>Calvery</li> <li>August</li> </ul> </li> <li> <a class="title">Cities</a> <ul> <li>Denver</li> <li>Baltimore</li> <li>LA</li> <li>New York</li> <li>San Francisco</li> <li>New Orleans</li> <li>Jacksonville</li> <li>Calvery</li> <li>August</li> </ul> </li> <li> <a class="title">News</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Shows</a> <ul> <li>HBO</li> <li>CBS</li> <li>NBC</li> <li>CNN</li> </ul> </li> <li> <a class="title">Topics</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> <li> <a class="title">Shows</a> <ul> <li>CBS</li> <li>NBC</li> </ul> </li> <li> <a class="title">Networks</a> <ul> <li>HBO</li> <li>CBS</li> <li>NBC</li> <li>CNN</li> </ul> </li> <li> <a class="title">Groups</a> <ul> <li>Top Stories</li> <li>Trending Stories</li> <li>Sports</li> <li>US</li> <li>Global</li> </ul> </li> </ul> 

---

要求

1. 如果页面的宽度增长，我希望有更多的列，如果它缩小我想要更少的列。

2. 如果我要添加两倍的项目，我希望列的高度变得更高，以便有额外项目的空间。

3. 每组之间的填充/空白应该是相同的。

4. 理想情况下，我不会使用JavaScript（但如果这是唯一的方法）。

问题

当我缩小屏幕高度/宽度时，内容溢出菜单的右侧。

思考

我已经搜索了一个CSS解决方案，但找不到在不均匀组之间不添加间距的解决方案。 （例如不均匀的空白 ）

我能想到的是使用JavaScript来动态设置flexbox父级的高度（增加高度，直到最后一个项目组（TITLE F）完全显示，而不是溢出屏幕。

Answer 1

也许像这样（ jsfiddle ）：

.mega-menu {
  -webkit-column-count:1;
  -moz-column-count:1;
  column-count:1;
  padding: 15px 15px 0;
  background: #fff;
}
@media (min-width: 200px) {.mega-menu{-webkit-column-count:2;-moz-column-count:2;column-count:2;}}
@media (min-width: 300px) {.mega-menu{-webkit-column-count:3;-moz-column-count:3;column-count:3;}}
@media (min-width: 400px) {.mega-menu{-webkit-column-count:4;-moz-column-count:4;column-count:4;}}
// ...
@media (min-width: 1800px) {.mega-menu{-webkit-column-count:18;-moz-column-count:18;column-count:18;}}
@media (min-width: 1900px) {.mega-menu{-webkit-column-count:19;-moz-column-count:19;column-count:19;}}
@media (min-width: 2000px) {.mega-menu{-webkit-column-count:20;-moz-column-count:20;column-count:20;}}
.mega-menu > li {
  display:inline-block;
  font-size: .7rem;
  padding-bottom: 15px;
}

它可能需要至少扩展到4K显示器的宽度。 如果你有SASS或类似的东西，这将使事情变得不那么繁琐。

它不提供内容感知列宽，让您猜测可能的最小列宽。

当你有很多项目要展示但没有滚动时，你提到的关于右边菜单的问题并没有真正解决任何解决方案。 考虑到较窄的显示宽度通常也具有较短的显示高度。 屏幕越小，您就越不能适应。 可能需要安排较小的屏幕以减少菜单选项。