Question 404926 in CSS Question posted in
Some basic documentation can be found here.

Css – space-evenly not working in my flexbox menu

I’m trying to get my menu to space out evenly. It seems to be stuck in the middle and not expanding into free space on either side.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>

    <style>

      .navMenu{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 7px;
        background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), black);        
      }

      .navMenu ul{
        list-style: none;
        background-color: blue;
        margin: 0;
        padding-left: 2%;
      }

      ul li{
        display: inline-block;
        position: relative;
      }

      ul li a{
        display: block;
        padding: 4px 1dvw;
        color: white;
        text-decoration: none;
        font-size: 1.1em;
      }

      ul li ul.dropdown li{
        display: block;
        padding: 8px;
      }

      ul li ul.dropdown{
        position: absolute;
        z-index: 999;
        display:none;
      }

      ul li a:hover{
        box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5);
      }

      ul li:hover ul.dropdown{
        display: flex;
        flex-direction: column;
        padding: 0;
      }
    </style>    

  </head>  

  <body>

    <nav class="navMenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Teams</a>
          <ul class="dropdown">
            <li><a href="#">Cubs</a></li>
            <li><a href="#">Braves</a></li>
          </ul>
        </li>
        <li><a href="#">Coaches</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Contact</a></li>
    </nav>

  </body>

</html>

I’ve tried space-evenly, space-around, space-between, etc. Nothing works as I think it should.

Tags:

2

Answers


  1. 0

    The problem you are having is because the ‘ul’ inside the container ‘.navMenu’ has a background color and padding, hence the flexbox isn’t laying out items the way it should.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>

    <style>

      .navMenu{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 7px;
        background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), rgb(0,0,255), black);        
      }

      .navMenu ul{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex: 1;
      }

      ul li{
        display: inline-block;
        position: relative;
        flex: 1;
      }

      ul li a{
        display: block;
        padding: 4px 1vw;
        color: white;
        text-decoration: none;
        font-size: 1.1em;
        text-align: center;
      }

      ul li ul.dropdown li{
        display: block;
        padding: 8px;
      }

      ul li ul.dropdown{
        position: absolute;
        z-index: 999;
        display:none;
      }

      ul li a:hover{
        box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5);
      }

      ul li:hover ul.dropdown{
        display: flex;
        flex-direction: column;
        padding: 0;
      }
    </style>    

  </head>  

  <body>

    <nav class="navMenu">
      <ul>
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Teams</a>
          <ul class="dropdown">
            <li><a href="#">Cubs</a></li>
            <li><a href="#">Braves</a></li>
          </ul>
        </li>
        <li><a href="#">Coaches</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </body>

</html>
    Login or Signup to reply.
  2. 0

    There are a couple of small problems in your code.

    The first ul isn’t closed explicitly but more importantly the flex is on the parent of the first ul (the navbar) rather than on the ul itself.

    As it stands, the flex has only one item as a child and it centers it.

    If you put the flex on the ul then it will have spece between its items.

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Testing</title>

  <style>
    .navMenu {
      padding: 7px;
      background-image: linear-gradient(rgb(105, 109, 196), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), black);
    }
    
    .navMenu ul {
      list-style: none;
      background-color: blue;
      margin: 0;
      padding-left: 2%;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
    }
    
    ul li {
      display: inline-block;
      position: relative;
    }
    
    ul li a {
      display: block;
      padding: 4px 1dvw;
      color: white;
      text-decoration: none;
      font-size: 1.1em;
    }
    
    ul li ul.dropdown li {
      display: block;
      padding: 8px;
    }
    
    ul li ul.dropdown {
      position: absolute;
      z-index: 999;
      display: none;
    }
    
    ul li a:hover {
      box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5);
    }
    
    ul li:hover ul.dropdown {
      display: flex;
      flex-direction: column;
      padding: 0;
    }
  </style>

</head>

<body>

  <nav class="navMenu">
    <ul>
      <li><a href="#">Home</a></li>
      <li>
        <a href="#">Teams</a>
        <ul class="dropdown">
          <li><a href="#">Cubs</a></li>
          <li><a href="#">Braves</a></li>
        </ul>
      </li>
      <li><a href="#">Coaches</a></li>
      <li><a href="#">Videos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</body>

</html>

    I guess you will want to sort out whether the linear gradient on the navbar is what you want seen as at the moment the ul covers it so the background is a plain blue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search