Using CSS Flex and space-evenly isn't working-CodePudding

I've started getting to grips with flex and as soon as I think I have a solid understanding and tried to implement it I find it's not working.

The main issue is the justify-content: space-evenly inside my ul isn't taking any effect and I can't see why. From everything I've looked at this is correct and should work, I've even seen people using this in tutorials within the same structure.

I placed a border around the element to make sure there is space for it to take up. I've tried different flex properties, they wont work either. Am I doing something do disable flex?

Any ideas what I'm doing wrong here?

CSS

h1 {
    font-size: 6em;
    text-align: center;
}
nav {
    font-size: 1.5em;
    display: flex;
    justify-content: space-between;
}

ul {
    border: 1px solid red;
    display: flex;
    flex-grow: 1;
    justify-content: space-evenly;
    max-width: 50%;
}

ul,li {
    display: inline;
    margin: 0;
    padding: 0;
}

HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Queries</title>
    <link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="app.css">
</head>

<body>
    <nav>
        <a href="#home">Home</a>
        <ul>

            <li>
                <a href="#Home">Learn More</a>
            </li>
            <li>
                <a href="#Home">About</a>
            </li>
            <li>
                <a href="#Home">Contact</a>
            </li>

        </ul>
        <a href="#signup">Sign Up</a>
    </nav>
    <h1>Flex Box
</h1>

</body>

</html>

CodePudding user response：

You need to remove the "display: inline" from the ul and li selectors.

ul,li {
    margin: 0;
    padding: 0;
}

CodePudding user response：

Here you can try this logic, it works :

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Media Queries</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="app.css" />
  </head>

  <style>
    h1 {
      font-size: 6em;
      text-align: center;
    }
    nav {
      font-size: 1.5em;
      display: flex;
      justify-content: space-between;
    }

    ul {
      border: 1px solid red;
      max-width: 50%;
    }

    ul,
    li {
      display: inline;
      margin: 0;
      padding: 0;
    }

    ul {
      display: flex;
      flex-grow: 1;
      justify-content: space-evenly;
    }
  </style>

  <body>
    <nav>
      <a href="#home">Home</a>
      <ul>
        <li>
          <a href="#Home">Learn More</a>
        </li>
        <li>
          <a href="#Home">About</a>
        </li>
        <li>
          <a href="#Home">Contact</a>
        </li>
      </ul>
      <a href="#signup">Sign Up</a>
    </nav>
    <h1>Flex Box</h1>
  </body>
</html>

CodePudding user response：

You're overriding the ul{display:flex} with ul,li {display: inline;}. Remove the display:inline for the ul and keep your margin and padding with ul, li{}.

h1 {
  font-size: 6em;
  text-align: center;
}

nav {
  font-size: 1.5em;
  display: flex;
  justify-content: space-between;
}

ul {
  border: 1px solid red;
  display: flex;
  flex-grow: 1;
  justify-content: space-evenly;
  max-width: 50%;
}

li {
  display: inline;
}

ul,
li {
  margin: 0;
  padding: 0;
}

<nav>
  <a href="#home">Home</a>
  <ul>
    <li>
      <a href="#Home">Learn More</a>
    </li>
    <li>
      <a href="#Home">About</a>
    </li>
    <li>
      <a href="#Home">Contact</a>
    </li>
  </ul>
  <a href="#signup">Sign Up</a>
</nav>
<h1>Flex Box</h1>

CodePudding user response：

you're over-writing the display: flex of your ul by the line of code below that (display: inline). here's the solution below with comments. use list-style: none to get rid of the bullet points on li

h1 {
    font-size: 6em;
    text-align: center;
}
nav {
    font-size: 1.5em;
    display: flex;
    justify-content: space-between;
}

ul {
    border: 1px solid red;
    display: flex;
    flex-grow: 1;
    justify-content: space-evenly;
    max-width: 50%;
}

ul,li {
  /* -- remove the below line. you're over-writing the display of ul
    display: inline;
    */
    
    /* -- add this below line to get rid of the bullet points */
    list-style: none;
    
    margin: 0;
    padding: 0;
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Queries</title>
    <link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="app.css">
</head>

<body>
    <nav>
        <a href="#home">Home</a>
        <ul>

            <li>
                <a href="#Home">Learn More</a>
            </li>
            <li>
                <a href="#Home">About</a>
            </li>
            <li>
                <a href="#Home">Contact</a>
            </li>

        </ul>
        <a href="#signup">Sign Up</a>
    </nav>
    <h1>Flex Box
</h1>

</body>

</html>

CodePudding user response：

You are setting display: flex with your ul selector, but afterwards you have another ul selector -> ul,li where you set display: inline
So your are overriding your previous display property

ul {
    display: flex;
    ...
}

ul,li {
    display: inline;
    ...
}

So you have to change the second selector. Remove ul from it.
Also, the ul element has a padding by default, remove it with padding: 0; in your ul selector in order to have it really spaced evenly.

See below example, your space-evenly is workign here

h1 {
    font-size: 6em;
    text-align: center;
}
nav {
    font-size: 1.5em;
    display: flex;
    justify-content: space-between;
}

ul {
    border: 1px solid red;
    display: flex;
    flex-grow: 1;
    justify-content: space-evenly;
    max-width: 50%;
    padding: 0;
}

li {
    display: inline;
    margin: 0;
    padding: 0;
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Queries</title>
    <link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="app.css">
</head>

<body>
    <nav>
        <a href="#home">Home</a>
        <ul>

            <li>
                <a href="#Home">Learn More</a>
            </li>
            <li>
                <a href="#Home">About</a>
            </li>
            <li>
                <a href="#Home">Contact</a>
            </li>

        </ul>
        <a href="#signup">Sign Up</a>
    </nav>
    <h1>Flex Box
</h1>

</body>