Why justify-content: space-between; not working here-CodePudding

Why justify-content: space-between; not working here

when I was creating the nav bar I wanted space between the div item and position fixed to the bottom but when I add CSS then justify-content: space-between; not working. How can I spread the div item? Or how to create a bottom navbar like amazon

   


body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul{
    list-style: none;
}

a{
    text-decoration: none;
}
.container{
 width:90%;
  margin:auto;
  
}
.nav_list{
  position:fixed;
  bottom:0%;
  display:flex;
  justify-content: space-between;

  align-content:center;
}
.nav_item{
  margin:10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div >
    <ul >
      <li ><a href="">abcd</a></li>
      <li ><a href="">abcd</a></li>
      <li ><a href="">abcd</a></li>
      <li ><a href="">abcd</a></li>
    </ul>
</div>
  
  <script src="script.js"></script>


  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script> 
</body>

</html>

CodePudding user response：

The problem is that the .nav_list-element does not have a proper width - when you apply position: fixed to an element, it will go out of the document flow, and can give you some weird layout problems.

Alternatively you could apply width: 100% to the .nav_list element ´ to let it take full width of the parent container (90%), but again, giving a nested element position: fixed can lead to some weird layout problems, so instead I'd recommend giving the container position: fixed instead.

html,
body {
  height: 100%;
  width: 100%;
}


/* 
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.container {
  position: fixed;
  bottom: 0%;
  width: 90%;
  margin: auto;
}

.nav_list {
  /* position: fixed; */
  /* bottom: 0%; */
  display: flex;
  justify-content: space-between;
  align-content: center;
  /* if you must keep position: fixed on this element, give it 100% width */
  /* width: 100%; */
}

.nav_item {
  margin: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div >
    <ul >
      <li ><a href="">abcd</a></li>
      <li ><a href="">abcd</a></li>
      <li ><a href="">abcd</a></li>
      <li ><a href="">abcd</a></li>
    </ul>
  </div>

  <script src="script.js"></script>


  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>

</html>

CodePudding user response：

The ul is a fixed position element with no width information, so it shrink wraps the content.

space-between evenly distributes the space between the elements, but there is no space between the elements.

You could

Set left and right
Set width
Set min-width

Make sure you account for the default margins on a ul.

CodePudding user response：

It's because you're using position: fixed;. If you also want to use justify-content, you need to set left and right to 0:

.nav_list{
   position:fixed;
   left: 0; //added
   right: 0; //added
   bottom:0%;
   display:flex;
   justify-content: space-between;
   align-content:center;
}