显示 flex 创建额外空间为什么

Question

我对 flexbox 的理解是，如果您将元素显示为 flex，则该项目将成为 flex 容器，并且它的直接子项将成为 flex 项目，而这些 flex 项目表现为内联块项目，所以我遵循这个逻辑，它工作正常，直到我在我的 css 中添加了最后一个，请阅读我在 css 代码中留下的评论，哪一行让我感到困惑。

简而言之，我期待类似的结果，但我对空间感到困惑，请参阅图片以了解，

代码

<ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="menu-item-has-children"><a href="#">Services</a>
                <ul class="sub-menu">
                    <li><a href="#">Plumbing</a></li>
                    <li class="menu-item-has-children"><a href="#">Heating</a>
                        <ul class="sub-menu">
                            <li><a href="#">Residential</a></li>
                            <li><a href="#">Commercial</a></li>
                            <li><a href="#">Industrial</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Electrical</a></li>
                </ul>
            </li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact Us</a></li>

        </ul>

代码

/*basic style no need to pay attention*/
*{font-family:helvetica;
    margin:0px;padding:0;
    list-style-type:none;
}
ul{margin:5px;}
ul ul a:link{color:red;}
ul ul ul a:link{color:black}
/*displaying them as flex, work fine*/
.menu{display:flex;}
.menu li {flex:1;}

.menu li a {
    display:block;
    min-width:100%
}

/*this line is confusing to me*/
ul ul li{
    display:flex;
}

第一张图片

第二张图片

Answer 1

默认情况下，flex 从左到右按行组织元素。在您的情况下，这意味着内部的两个元素<li class="menu-item-has-children">（链接和子菜单）将并排放置。

您必须添加flex-direction: column才能解决您的问题：

* {
  font-family: helvetica;
  margin: 0px;
  padding: 0;
  list-style-type: none;
}

ul {
  margin: 5px;
}

ul ul a:link {
  color: red;
}

ul ul ul a:link {
  color: black
}

.menu {
  display: flex;
}

.menu li {
  flex: 1;
}

.menu li a {
  display: block;
}

ul ul li {
  display: flex;
  flex-direction: column; /* <- specify the flex direction here */
}

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li class="menu-item-has-children"><a href="#">Services</a>
    <ul class="sub-menu">
      <li><a href="#">Plumbing</a></li>
      <li class="menu-item-has-children"><a href="#">Heating</a>
        <ul class="sub-menu">
          <li><a href="#">Residential</a></li>
          <li><a href="#">Commercial</a></li>
          <li><a href="#">Industrial</a></li>
        </ul>
      </li>
      <li><a href="#">Electrical</a></li>
    </ul>
  </li>
  <li><a href="#">Pricing</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

事实上，您的子菜单似乎位于弹性容器之外，这是由元素min-width: 100%上的设置引起的.menu li a。