Question

我正在尝试使用flexbox创建一个导航栏。我想让menu-center div对齐到徽标附近。和menu-right分别从右侧的menu-left和menu-center处移出。

我该怎么做？

#main-nav {
  background: #181d2f;
}

#main-nav .menu-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#main-nav .menu-left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

#main-nav .menu-left .logo img {
  height: 60px;
}

#main-nav .menu-center {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
}

#main-nav .menu-center ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#main-nav .menu-center ul li {
  padding: 1.75rem 0;
}

#main-nav .menu-center ul li a {
  color: #fff;
  padding: 1.5rem 1.25rem;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

#main-nav .menu-center ul li a:hover {
  color: #f40c43;
}

#main-nav .menu-right {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#main-nav .menu-right .login-wrap a {
  padding: 0 0.25rem;
}

<header>
      <nav id="main-nav">
        <div class="container">
          <div class="menu-wrap">
            <div class="menu-left">
              <div class="logo">
                <img src="assets/img/logo-light.png" alt="muslimabc-logo" />
              </div>
            </div>
            <div class="menu-center">
              <ul>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Listings</a></li>
                <li>
                  <a href="#">Products <i class="fas fa-chevron-down"></i></a>
                </li>
                <li><a href="#">Be A Vendor</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
            <div class="menu-right">
              <div class="login-wrap text-white">
                <i class="fas fa-user-alt mr-1"></i> <a href="#">Sign In</a> or
                <a href="#">Register</a>
              </div>
              <div class="cta-btn">
                <a class="btn-light" href="#"
                  ><i class="fas fa-plus mr-1"></i> Add Listing</a
                >
              </div>
            </div>
          </div>
        </div>
      </nav>
    </header>

Answer 1

如果要通过justify-content: space-between;在flex容器中创建左侧和右侧，则需要在该容器中包含两个元素。

在下面的代码段中，我为您的.menu-left-side和.menu-left元素创建了一个.menu-center包装器。您的.menu-right保留相同的名称。我强烈建议您使用适当的类名重命名左侧元素。

我还从您的代码段中删除了一些与flex相关的CSS规则，以使内容更好地对齐。

   

  #main-nav {
      background: #181d2f;
    }

    #main-nav .menu-wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }

    #main-nav .menu-left {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }

    #main-nav .menu-left .logo img {
      height: 60px;
    }

    #main-nav .menu-center ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }

    #main-nav .menu-center ul li {
      padding: 1.75rem 0;
    }

    #main-nav .menu-center ul li a {
      color: #fff;
      padding: 1.5rem 1.25rem;
      -webkit-transition: all 0.4s ease;
      transition: all 0.4s ease;
    }

    #main-nav .menu-center ul li a:hover {
      color: #f40c43;
    }

    #main-nav .menu-right {
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }

    #main-nav .menu-right .login-wrap a {
      padding: 0 0.25rem;
    }

    #main-nav .menu-left-side{
      display: flex;
      align-items: center;
    }

<header>
  <nav id="main-nav">
    <div class="container">
      <div class="menu-wrap">
        <div class="menu-left-side">
          <div class="menu-left">
            <div class="logo">
              <img src="assets/img/logo-light.png" alt="muslimabc-logo" />
            </div>
          </div>
          <div class="menu-center">
            <ul>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Listings</a></li>
              <li>
                <a href="#">Products <i class="fas fa-chevron-down"></i></a>
              </li>
              <li><a href="#">Be A Vendor</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div>
        <div class="menu-right">
          <div class="login-wrap text-white">
            <i class="fas fa-user-alt mr-1"></i> <a href="#">Sign In</a> or
            <a href="#">Register</a>
          </div>
          <div class="cta-btn">
            <a class="btn-light" href="#"><i class="fas fa-plus mr-1"></i> Add Listing</a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</header>

Answer 2

我不知道我是否能正确处理您的请求，但是尝试使用此CSS代码，并附加了Codepen的链接

css

#main-nav {
  background: #181d2f;
}

#main-nav .menu-wrap {
  display: flex;
  align-items:center;
}

#main-nav .menu-left .logo img {
  height: 60px;
}

#main-nav .menu-center ul {
  display: flex;
  align-items:center;
  list-style:none;
  padding: 0;
}

#main-nav .menu-center ul li {
  padding: 1.75rem 0;
}

#main-nav .menu-center ul li a {
  color: #fff;
  padding: 1.5rem 1.25rem;
  transition: all 0.4s ease;
}

#main-nav .menu-center ul li a:hover {
  color: #f40c43;
}

#main-nav .menu-right {
  margin-left:auto;
  display:flex;
  justify-content:space-between;
}

#main-nav .menu-right .login-wrap a {
  padding: 0 0.25rem;
}

codepen https://codepen.io/ahamdan/pen/qBNOreY?editors=1100

PS：上面的内容在较小的屏幕上没有响应，您必须指定媒体查询并更改屏幕断点的属性，这样它才能响应

CSS-使用flexbox创建导航栏

2 个答案: