Creating a space between flex items in nested flexbox-CodePudding

I have a nested flex box structure how ever there is no gap between the flex item.

      <div class = "navbar-container">
      <a href="index.html">
        <div class = "logo">
          <img src="./media/logo.svg" alt = " logo" height = "80px" width="80">
        </div>
      </a>
      <ul class = "nav-links">
        <li class = "nav-link">
          <a href="#">Install</a>
        </li>
        <li class = "nav-link">
          <a href="#">Learn</a>
        </li>
        <li class = "nav-link">
          <a href = "#">item</a>
        </li>
        <li class = "nav-link">
          <a href = "#">item</a>
        </li>

        <li class = "nav-link">
           <a href="#">item</a>
        </li>
        
      </ul>
  </div>

In my css body, I tried using justify-content property but it just does not work.

.navbar-container{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
 }
 .nav-links{
   display: flex;
   justify-content:space-between;
  }

CodePudding user response：

Set Width of nav-links or use column-gap

        .navbar-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .nav-links {
            width: 300px;
            // column-gap: 30px;
            display: flex;
            justify-content: space-between;
        }

<!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>Document</title>
   
</head>

<body>

    <div >
        <a href="index.html">
            <div >
                <img src="./media/logo.svg" alt=" logo" height="80px" width="80">
            </div>
        </a>
        <ul >
            <li >
                <a href="#">Install</a>
            </li>
            <li >
                <a href="#">Learn</a>
            </li>
            <li >
                <a href="#">item</a>
            </li>
            <li >
                <a href="#">item</a>
            </li>

            <li >
                <a href="#">item</a>
            </li>

        </ul>
    </div>
</body>

</html>

CodePudding user response：

You can use column-gap: 35px; in .nav-links class. Read this

You can add padding-left:35px; in li.nav-link.

.nav-links {
    display: flex;
    justify-content: space-between;
    column-gap: 35px;
}

CodePudding user response：

I recently had to restructure a big portion of code for a client because I had built many of the components on the website with gap in flex-structures, and they were using a browser that didn't support it.

gap has support in all modern browsers for flex, but not as great as gap for grid for some reason. Hopefully it will have full support soon.

flex-gap support: https://caniuse.com/?search=flex-gap

grid-gap support: https://caniuse.com/?search=grid-gap

For that reason alone, I would also like to suggest a solution that achieves the same with padding-right. You will most likely get by fine by using gap though. The code below will give padding to all the nav-link-elements besides the last one.

.navbar-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.nav-links {
  display: flex;
  justify-content: space-between;
}

.nav-link:not(:last-child) {
  padding-right: 30px;
}

<div >
  <a href="index.html">
    <div >
      <img src="./media/logo.svg" alt=" logo" height="80px" width="80">
    </div>
  </a>
  <ul >
    <li >
      <a href="#">Install</a>
    </li>
    <li >
      <a href="#">Learn</a>
    </li>
    <li >
      <a href="#">item</a>
    </li>
    <li >
      <a href="#">item</a>
    </li>

    <li >
      <a href="#">item</a>
    </li>

  </ul>
</div>