Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

display flex creating extra space why

Tags:

html

css

flexbox

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 enter image description here

Second image enter image description here

like image 971
user2860957 Avatar asked Aug 08 '17 04:08

user2860957


People also ask

Why is there additional space in the flexbox container?

It's because your container is full width and the children are only 100px. The rest space is added to the layout.

How do I get rid of flexbox extra whitespace?

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.


1 Answers

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.

like image 118
Robby Cornelissen Avatar answered Sep 30 '22 18:09

Robby Cornelissen