Команда разрыва привязки тега flexbox (HTML & CSS) - PullRequest
Новая
       36

Команда разрыва привязки тега flexbox (HTML & CSS)

0 голосов
/ 20 сентября 2019

Я пытаюсь использовать flexbox (justify-content: space -ween;), чтобы переместить логотип Motorola влево и красный блок (панель навигации) вправо.Это на самом деле работает довольно хорошо, если нет привязанного тега.Тем не менее, мне нужны якорные теги, чтобы посетители могли нажимать на каждый элемент навигационной панели и переходить в соответствующий раздел веб-сайта.Как я могу заставить работать justify-content без удаления якорных тегов?

HTML 

<div id="header">
  <img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Motorola_Logo_White.png" alt="This is Motorolas Logo">
  <div id="nav-bar">
    <div id="nav1" class="nav-link"><a href="#prices">Prices</div>
    <div id="nav2" class="nav-link"><a href="#prices">Specs</div>
    <div id="nav3" class="nav-link"><a href="#prices">Reviews</div>
  </div> 
</div>

CSS 

#header {
  background-color: gray;
  position: fixed;
  justify-content: space-between;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 4rem;
}

#header-img {
  background-color: orange;
  height: 4rem;
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#nav-bar {
  background-color: red;
  width: 25%;
  height: 4rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

Здесь вы можете увидеть это на Codepen

1 Ответ

0 голосов
/ 20 сентября 2019

В тех случаях, когда у вас есть гибкий контейнер с содержимым, выровненным по левому краю - кроме одного или нескольких элементов, которые вы хотите выровнять по правому краю, существует ярлык, использующий свойство margin.

Если вы добавляетеСледующее правило для ваших существующих стилей: 

#nav-bar {
    margin-left: auto; /* Pushes the element right inside a flex container */
}

Это должно работать так, как вы хотите.Вы даже можете удалить правило justify-content: space-between; из селектора #header.

...