Why is justify-content: space-between not working even though I have included display: flex?-CodePudding

CSS:

.navbar {
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-content: center;
    height: 10vh;
    background-color: blue;
}

HTML:

<nav >
    <div >
        <div ></div>
        <div ></div>
        <div ></div>
    </div>
</nav>

I was expecting the items to have spacing between them but they don't. Any suggestions?

I have tried .navbar .burger as the selector but it doesn't format quite well.

CodePudding user response：

Is that what you want:

.burger {
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-content: center;
        height: 10vh;
        background-color: blue;
        color: #fff;
    }

<nav >
  <div >
    <div >Text1</div>
    <div >Text2</div>
    <div >Text3</div>
  </div>
</nav>

CodePudding user response：

You need to apply the flexbox settings to the direct parent of the items which you want to affect, in your case .burger:

.burger {
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 10vh;
  background-color: blue;
  color: white;
}

<nav >
  <div >
    <div >Entry 1</div>
    <div >Entry 2</div>
    <div >Entry 3</div>
  </div>
</nav>

CodePudding user response：

Hibba Ahmed you look new here .. im too ^^

Hey what do you want space-between if your Flexbox and properties (justify-content: space-between) are toogled to only ONE element : div.burguer ?

And read more about how to post correctly for we help you !

I dont think that you miss some info to us, just forgot to close your <nav> with </nav> .

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Document</title>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        .navbar {
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-content: center;
            height: 10vh;
            background-color: gray;
        }
        .navbar > div {
            padding: 2px 10px;
            color: white;
        }
        .navbar > div:nth-child(1) {
            background: red;
        }
        .navbar > div:nth-child(2) {
            background: blue;
        }
        .navbar > div:nth-child(3) {
            background: yellow;
            color: black !important;
        }
    </style>
  </head>
  <body>
    <nav >
            <div >Home</div>
            <div >Panel</div>
            <div >Contact</div>
    </nav>
</body>
</html>