0

У меня есть меню. Блок 1 прижат к левому краю, блоки 5 и 6 прижаты к правому краю. Блоки 2,3,4 по середине.

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

Вот разметка:

<header>
  <nav>
    <div>
      <a id="home" href="/1">1</a>
    </div>
    <div>
      <a class="active" href="/2">2</a>
      <a class="active" href="/3">3</a>
      <a class="active" href="/4">4</a>
    </div>
    <div>
      <a class="active" href="/5">5</a>
      <a class="active" href="/6">6</a>
    </div>
  </nav>
</header>

Вот моя разметка:

nav {
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  div > a {
    align-items: center;
    margin: 0 10px;
  }
  a {
    font-weight: 600;
    font-size: rem(16);
    text-transform: uppercase;
    padding: 10px;
    color: $blueSemi;
    cursor: default;
  }
}

Для мибильной версии сайта я хочу блоки 2,3,4 опустить ниже. Как показано на картинке.

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

Как это можно сделать?

1 ответ 1

2

Нашел решение с помощью свойства Flexbox order:

@media screen and(max - width: 480 px) {
  nav {
    display: flex;
    flex - flow: row wrap;
  }

  nav > div: nth - child(1) {
    order: 1;
  }

  nav > div: nth - child(3) {
    order: 2;
  }

  nav > div: nth - child(2) {
    order: 3;
  }
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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