Navigation using flexbox

Question

One problem I have is with the horizontal navigation bar. I have implemented it using flexbox.

I have this nav bar that when I shrink it the list items (which have black border) do not stay within the unordered list container (with purple border)

From what I understand of each flex box should be resized within the parent container using the flex property. However in my case the list items are not being resized within the unordered list container. Here is a picture of what is going on:

Click to view the picture

Here is my html code:

nav.horizontalNavigation {
  width: 100%;
  padding: 0;
  clear: both;
}

nav.horizontalNavigation ul {
  display: flex;
  flex-flow: row nowrap;
  border: 3px solid purple;
  width: 100%;
  padding: 0;
  margin: 0;
}

nav.horizontalNavigation>ul li {
  display: flex;
  flex: 1 1 auto;
  border: 2px solid black;
  background-color: rgb(117, 140, 72);
  font-size: 1.3em;
  line-height: 2em;
  text-transform: uppercase;
  list-style-type: none;
}

nav.horizontalNavigation>ul li a {
  flex: 1 1 auto;
  display: block;
  padding-left: 10px;
  padding-right: 10px;
  color: white;
}

<header>

  <nav class="horizontalNavigation">
    <ul>
      <li><a href="#ll_home.html">HOME</a></li>
      <li><a href="#ll_services.html">SERVICES</a></li>
      <li><a href="#ll_commercial.html">COMMERCIAL & STRATA</a></li>
      <li><a href="#ll_contact.html">CONTACT US</a></li>
      <li><a href="#ll_gallery.html">GALLERY</a></li>
    </ul>
  </nav>

</header>

@SergChernata When you vote to close as a dupe, you should not close as a dupe of another dupe - close as a dupe of the ultimate target. — TylerH, Nov 06 '17 at 19:09

Asif Karim Bherani · Answer 1 · 2017-11-06T22:21:20.863

Check this out, you dont have enough space to hold everything on single line so you need to have wrap.

nav.horizontalNavigation {
  width: 100%;
  padding: 0;
  clear: both;
}

nav.horizontalNavigation ul {
  display: flex;
  flex-flow: row nowrap;
  border: 3px solid purple;
  width: 100%;
  padding: 0;
  margin: 0;
}

nav.horizontalNavigation>ul li {
  display: flex;
  flex: 1 1 auto;
  border: 2px solid black;
  background-color: rgb(117, 140, 72);
  font-size: 1.3em;
  max-width: 20%;
  line-height: 2em;
  text-transform: uppercase;
  list-style-type: none;
}

nav.horizontalNavigation>ul li a {
  flex: 1 1 auto;
  display: block;
  margin: auto;
  text-align: center;
  color: white;
}

<header>

  <nav class="horizontalNavigation">
    <ul>
      <li><a href="#ll_home.html">HOME</a></li>
      <li><a href="#ll_services.html">SERVICES</a></li>
      <li><a href="#ll_commercial.html">COMMERCIAL & STRATA</a></li>
      <li><a href="#ll_contact.html">CONTACT US</a></li>
      <li><a href="#ll_gallery.html">GALLERY</a></li>
    </ul>
  </nav>

</header>

What if I did not want it to wrap? I was expecting it to stay on the same line and have each list item shrink to fit. Also i was hoping the text would shrink with each list item. — j.doe, Nov 06 '17 at 19:27
If you dont have enough space then it would look ugly, check out the edited version — Asif Karim Bherani, Nov 06 '17 at 20:27

Navigation using flexbox

1 Answers1