在嵌套 flexbox 中的 flex 项目之间创建 space

Creating a space between flex items in nested flexbox

我有一个嵌套的弹性盒子结构,但是弹性项目之间没有间隙。

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

在我的 css 体内,我尝试使用 justify-content 属性 但它不起作用。

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

设置 nav-links 的宽度或使用 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>

您可以在 .nav-links class 中使用 column-gap: 35px;Read this

您可以在 li.nav-link 中添加 padding-left:35px;

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

我最近不得不为客户重组大部分代码,因为我在网站上用 gapflex 结构中构建了许多组件,并且他们使用的是浏览器支持它。

gap 在所有现代浏览器中都支持 flex,但由于某些原因不如 gap 支持 grid。希望它很快就会得到全面支持。

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

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

仅出于这个原因,我还想提出一个与 padding-right 实现相同的解决方案。不过,您很可能会通过使用 gap 来度过难关。下面的代码将为除最后一个之外的所有 nav-link 元素提供 padding

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