CSS Flex property 'justify-content' not working-CodePudding

Justify-content: space-around property is not working in the second flex box (nested), why can this be? code: html-

<body>
    <div >
        <div ><img src="redragon-logo.webp" alt="redragon-logo"></div>
        <div >
            <div >HOME</div>
            <div >PRODUCTS</div>
            <div >BLOG</div>
            <div >REVIEWS</div>
            <div >CONTACT</div>
            <div >
            <select name="currency" id="currency" >CURRENCY
                <option value="default" selected>Currency</option>
                <option value="rupee">₹ Rupee</option>
                <option value="yen">¥ Yen</option>
                <option value="dollar">$ USD</option>
                <option value="dollar">$ CAD</option>
            </select>
            </div>  
        </div>
    </div>
</body>

CSS -

*{
    margin: 0;
    padding: 0;
}
/* navbar styling starts*/
.navbar{
    padding: 0px 30px;
    background-color: #111;
    font-family: abel,arial;
    display: flex;
    height: 7vw;
    justify-content: space-between;
    align-items: center;
}
/* .logo{
    display: flex;
    justify-content: space-evenly;
} */
.otherlinks{
    color: #ccc;
    display: flex;
    justify-content: space-around;
}
select{
    padding: 0px 3px ; /*design this select input*/
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redragon</title>
    <link rel="stylesheet" href="website.css">
</head>
<body>
    <div >
        <div ><img src="redragon-logo.webp" alt="redragon-logo"></div>
        <div >
            <div >HOME</div>
            <div >PRODUCTS</div>
            <div >BLOG</div>
            <div >REVIEWS</div>
            <div >CONTACT</div>
            <div >
            <select name="currency" id="currency" >CURRENCY
                <option value="default" selected>Currency</option>
                <option value="rupee">₹ Rupee</option>
                <option value="yen">¥ Yen</option>
                <option value="dollar">$ USD</option>
                <option value="dollar">$ CAD</option>
            </select>
            </div>  
        </div>
    </div>
</body>
</html>

CodePudding user response：

You have a flexbox navbar with space-between set. As a result, the logo is pushed to the left side, whereas otherlinks is pushed to the right side. You do not want that. So you remove justifify-content: space-between from navbar.

Now you want the otherlinks div to take as much as needed. You add flex-grow: 1 to otherlinks.

* {
  margin: 0;
  padding: 0;
}


/* navbar styling starts*/

.navbar {
  padding: 0px 30px;
  background-color: #111;
  font-family: abel, arial;
  display: flex;
  height: 7vw;
  align-items: center;
}


/* .logo{
    display: flex;
    justify-content: space-evenly;
} */

.otherlinks {
  color: #ccc;
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
}

select {
  padding: 0px 3px;
  /*design this select input*/
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Redragon</title>
  <link rel="stylesheet" href="website.css">
</head>

<body>
  <div >
    <div ><img src="redragon-logo.webp" alt="redragon-logo"></div>
    <div >
      <div >HOME</div>
      <div >PRODUCTS</div>
      <div >BLOG</div>
      <div >REVIEWS</div>
      <div >CONTACT</div>
      <div >
        <select name="currency" id="currency" >CURRENCY
          <option value="default" selected>Currency</option>
          <option value="rupee">₹ Rupee</option>
          <option value="yen">¥ Yen</option>
          <option value="dollar">$ USD</option>
          <option value="dollar">$ CAD</option>
        </select>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

This is because the default width is "auto" which takes up as little space as possible. If you add width in this class:

.otherlinks{
    color: #ccc;
    display: flex;
    justify-content: space-around;
    width: 600px;
}

This should solve your problem, it's up to you to choose the width value that suits you best.

I invite you to consult this link to find the best unit for width: CSS values and units

I advise you: "vw"

The result:

*{
    margin: 0;
    padding: 0;
}
/* navbar styling starts*/
.navbar{
    padding: 0px 30px;
    background-color: #111;
    font-family: abel,arial;
    display: flex;
    height: 7vw;
    justify-content: space-between;
    align-items: center;
}
/* .logo{
    display: flex;
    justify-content: space-evenly;
} */
.otherlinks{
    color: #ccc;
    display: flex;
    justify-content: space-around;
    width: 600px;
}
select{
    padding: 0px 3px ; /*design this select input*/
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redragon</title>
    <link rel="stylesheet" href="website.css">
</head>
<body>
    <div >
        <div ><img src="redragon-logo.webp" alt="redragon-logo"></div>
        <div >
            <div >HOME</div>
            <div >PRODUCTS</div>
            <div >BLOG</div>
            <div >REVIEWS</div>
            <div >CONTACT</div>
            <div >
            <select name="currency" id="currency" >CURRENCY
                <option value="default" selected>Currency</option>
                <option value="rupee">₹ Rupee</option>
                <option value="yen">¥ Yen</option>
                <option value="dollar">$ USD</option>
                <option value="dollar">$ CAD</option>
            </select>
            </div>  
        </div>
    </div>
</body>
</html>