My understanding of flexbox, is that if you display a element as flex, that item become flex container and it direct children will become flex items and these flex items behave as inline block items, so i am following this logic, and it was working fine, untill i added the last in my css, please read the comment i left the comment in my css code, which line is confusing me.
in short i was expecting similiar outcome, but i am confuse about the space, please see the image to understand as well,
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;
}
First image
Second image
It's because your container is full width and the children are only 100px. The rest space is added to the layout.
You have to remove overflow-x: hidden; from html,boy leave default value. flex-wrap: 100vh; is wrong it should be flex-wrap: wrap | nowrap; read flex-wrap.
By default, flex organizes elements in rows, from left to right. In your case, that means that the two elements inside <li class="menu-item-has-children">
(the link and the sub-menu) will be positioned side by side.
You have to add flex-direction: column
to fix your issue:
* {
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>
The fact that your sub-menu appears to be outside your flex container is caused by the min-width: 100%
setting on your .menu li a
elements.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With