显示flex为

Question

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

总之，我期待类似的结果，但我对这个空间感到困惑，请看图像也能理解，

HTML CODE

<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才能解决问题：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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