Flexbox flex-wrap 不允许下拉列表中有超过一项 - Bulma.css

Question

我正在使用 Bulma CSS 文件创建网页，但导航栏出现问题。因此，我尝试稍微自定义导航栏中的下拉菜单，包括将 link 并排放置而不是上下排列。这是 Bulma 中默认下拉列表的样子：

但是，我想创建这样的东西...但是有多个行:

这就是我的问题所在。达到最大宽度后，我无法让它们继续到新行，如果我有很多项目，它们只会继续向右移动。

这是 HTML 元素结构：

                <div class="navbar-item has-dropdown is-hoverable">
                    <a id="trending" class="navbar-link is-arrowless">Trending</a>
                    <div id="trending-dropdown" class="navbar-dropdown">
                      <a class="navbar-item">Item</a>
                      <a class="navbar-item">Item</a>
                      <a class="navbar-item">Item</a>
                      <a class="navbar-item">Item</a>
                      <a class="navbar-item">Item</a>
                    </div>
                </div>

.navbar-dropdown 也有 display: flex;。

现在，这是我的尝试：

向 .navbar-dropdown 添加 flex-wrap: wrap：这只会让每个元素保持在自己的行上，就像我在 Bulma 中已经拥有的一样（参见第 1 个 img）
给.navbar-item一个flex: 1（我也用了flex-basis: 10%）
为下拉菜单指定最大宽度

这是 link 代码笔：https://codepen.io/coderDeveloper/pen/bGWpOva

   I really hope someone can help me as I'm at my wit's end 
               Thanks in advance!!

Answer 1

你可以用 flex-wrap 在父级上做一个 max-content 的宽度，也许是一个间隙，然后在子级上做一个 flex：auto 或 0 取决于您希望第二行如何布局，最小宽度计算为父级宽度的百分比。

父元素：

  display: flex;
  flex-wrap: wrap;
  width: max-content;

子元素：

  flex: 0;
  min-width: calc(33% - 1em);

Link to your code pen with these settings

.navbar-dropdown  {
  display: flex;
  flex-wrap: wrap;
  width: max-content;
  gap: 1em;
}

.navbar-dropdown {
  display: none;
}

.navbar-item:hover .navbar-dropdown {
  display: flex;
}

.navbar-dropdown a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0;
  min-width: calc(33% - 1em);
  height: 2em;
  background: #ddd;
}

<div class="navbar-item has-dropdown is-hoverable">
  <a id="trending" class="navbar-link is-arrowless">Trending</a>
  <div id="trending-dropdown" class="navbar-dropdown">
    <a class="navbar-item">Item</a>
    <a class="navbar-item">Item</a>
    <a class="navbar-item">Item</a>
    <a class="navbar-item">Item</a>
    <a class="navbar-item">Item</a>
    <a class="navbar-item">Item</a>
  </div>
</div>

Flexbox flex-wrap 不允许下拉列表中有超过一项 - Bulma.css

Flexbox flex-wrap not allowing more than one item in dropdown - Bulma.css

html

css

flexbox

bulma