Creating a space between flex items in nested flexbox

user_14778077 0
Viewed 266

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;
  }
flexbox css
3 Answers

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 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>
</body>

</html>

user_174978620

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

OR

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

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

user_154122660

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 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>

user_147768090
Related