Display flex Schaffung zusätzlichen Platz warum

Question

Mein Verständnis von flexbox, ist, dass, wenn Sie ein Element als flex, dieses Element flex Container und es direkte Kinder werden flex Elemente und diese flex Elemente verhalten sich als Inline-Block Artikel, so ich Ich folge dieser Logik, und es funktionierte gut, bis ich die letzte in meinem CSS hinzugefügt habe, bitte lesen Sie den Kommentar Ich ließ den Kommentar in meinem CSS-Code, welche Zeile mich verwirrt.

kurz i similiar Ergebnis wurde erwartet, aber ich bin über den Raum verwirren, sehen Sie bitte das Bild als auch zu verstehen,

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 CODE

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

Erstes Bild

Zweites Bild

Answer 1

standardmäßig flex organisiert Elemente in Reihen von links nach rechts. In Ihrem Fall bedeutet dies, dass die beiden Elemente innerhalb von <li class="menu-item-has-children"> (der Link und das Untermenü) nebeneinander positioniert werden.

Sie haben flex-direction: column um Ihr Problem zu beheben:

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

Die Tatsache, dass Ihr Untermenü außerhalb Ihres Flex Behälters zu sein scheint durch die min-width: 100% Einstellung auf Ihrem .menu li a verursacht wird Elemente.