html - 显示 flex 创造额外的空间 为什么

Question

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

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

HTML 代码

<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>

CSS 代码

/*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>

您的子菜单出现在 flex 容器之外的事实是由 min-width: 100% 引起的在你的 .menu li a 上设置元素。