Flexbox 列表项 - 等高嵌套列表项答案

【问题标题】：Flexbox list items - equal height nested list itemsFlexbox 列表项 - 等高嵌套列表项
【发布时间】：2020-09-10 12:56:45
【问题描述】：

我想要大小相等的嵌套列表项。这是正在处理的示例代码

ul.menu {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  height: 100%;
}

ul.menu li {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  flex: 1;
}

<ul class="menu">
  <li>menu item 1</li>
  <li>menu item 2
    <ul class="submenu">
      <li>sub-menu item 1</li>
      <li>sub-menu item 2</li>
      <li>sub-menu item 3</li>
    </ul>
  </li>
  <li>menu item 3</li>
</ul>

所有菜单项的高度都相同，但子菜单项的高度不一样。所有菜单项和子菜单项应具有相同的高度。像这样：

【问题讨论】：

标签： css flexbox

【解决方案1】：

将flex-direction: column 添加到嵌套列表中。

ul.menu {
  display: flex;
  flex-flow: column;
}

ul.menu li {
  display: flex;
  flex-flow: column; /* new */
}

li {
  border: 1px solid black;
  margin: 5px;
}

<ul class="menu">
  <li>menu item 1</li>
  <li>menu item 2
    <ul class="submenu">
      <li>sub-menu item 1</li>
      <li>sub-menu item 2</li>
      <li>sub-menu item 3</li>
    </ul>
  </li>
  <li>menu item 3</li>
</ul>

【讨论】：

【解决方案2】：

你可以在下面的小提琴中做这样的事情，你可以给下面的 li 块和fiddle 中的一些最小高度。

li {
  border: 1px solid black;
  margin: 0 0 5px;
  min-height:50px;
}

【讨论】：