Блог

Главная - Вопросы по программированию - CSS — создание панели навигации с помощью flexbox

CSS — создание панели навигации с помощью flexbox

#html #css #sass

#HTML #css #sass

Вопрос:

Я пытаюсь создать панель навигации с помощью 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>

Ответ №1:

Если вы хотите создать левую и правую стороны в контейнере flex justify-content: space-between; , вам нужно иметь два элемента внутри этого контейнера.

В приведенном ниже фрагменте я создал .menu-left-side оболочку для ваших .menu-left .menu-center элементов и . Ваше .menu-right имя остается тем же. Я настоятельно рекомендую вам переименовать элементы левой стороны соответствующими именами классов.

Я также удалил некоторые CSS-правила, связанные с flex, из вашего фрагмента, чтобы лучше выровнять вещи.

    

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

Ответ №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: вышеизложенное не реагирует на меньший экран, вам нужно указать медиа-запросы и изменить свойства в точке прерывания экрана, чтобы он был отзывчивым