css - Flexbox 列表项 - 等高嵌套列表项

Question

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

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>

我得到所有菜单项的高度相同，但不是子菜单项。所有菜单项和子菜单项应具有相同的高度。像这样：

标签： cssflexbox

Answer 1

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

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