1

У меня логотип съезжает влево, когда справа вставляешь блоки меню. Как решить проблему? Чтобы логотип не плавал туда-сюда? Вот сам код:

.header {
    width: 1260px;
    margin: 0 auto; 
    height: 350px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
} 

введите сюда описание изображения

2
  • Логотип картинка со статичной шириной? Или что? 28 сен 2016 в 17:53
  • 1
    Добавьте html код.
    – edem
    28 сен 2016 в 18:35

2 ответа 2

2

В данном случае флекcбокс отрабатывает, как и должен. Он обязан сохранять одинаковое расстояние между элементами при space-between. Чтобы этого избежать нужно логотип выдернуть из контекста, например с помощью position: absolute:

JSBin

.container {
  background-color: yellow;
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.container > div {
  background-color: steelblue;
  border-radius: 5px;
  color: white;
  padding: 10px;
  text-align: center;
}

.logo {
  position: absolute;
    left: calc(50% - 50px);
  width: 100px;
}

.menu {
  width: 200px;
}
<section class="container">
  <div> 1 </div>
  <div class="logo"> 2 </div>
  <div class="menu"> 3 </div>
</section>

0

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

Всё, что потребуется — это добавить дополнительную обертку для логотипа (в HTML) и добавить ей стили, которые растянут эту обертку на всю высоту и ширину, а затем отцентрируют внутренний элемент.

header {
  display: flex;
  padding: 15px;
  border: 1px solid #ccc;
  justify-content: space-between;
  position: relative;
}

menu, button {
  position: relative;
  z-index: 1;
}

.logo {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: flex;
}

.logo a {
  margin: auto;
}
<header>
  <button>button</button>
  
  <span class="logo">
    <a href="/">LG</a>
  </span>
  
  <menu>
    <a href="#">menu 1</a>
    <a href="#">menu 2</a>
    <a href="#">menu 3</a>
    <a href="#">menu 4</a>
  </menu>
</header>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.