У меня слева логотип, справа на одной линии стоит навигационная панель.
Логотип и панель навигации обёрнуты в header.
Я применил к header'y display: flex, с двумя целями во первых при большом экране
лого уйдёт влево, а панель меню в право( у меня так и вышло):
И второй момент, я думал что при маленьком экране логотип останется на одной строке, а меню переместится на другую строку.
Но! Всё работает совсем не так.. логотип остаётся на месте, а менюшки сбиваются в кучу справа, при этом оставаясь на "одной строке с логотипом!!!!
Я плохо понимаю флекс..
Какое свойство тут надо применить, чтобы при маленьком экране, логотип оставался на своей строке,
А навигационное меню переходило на другую строку?!
Или тут надо поступить как то по другому?!
Логотип и панель навигации обёрнуты в header.
HTML:
<header>
<div class="Logo">
<h1>
RaymontionDEG
</h1>
</div>
<nav>
<a class="nav_link" href="#"> Главная</a>
<a class="nav_link" href="#"> О нас </a>
<a class="nav_link" href="#"> Партнёры</a>
<a class="nav_link" href="#"> Контакты </a>
</nav>
</header>
лого уйдёт влево, а панель меню в право( у меня так и вышло):
CSS:
display: flex;
justify-content: space-between;
align-items: center;
Но! Всё работает совсем не так.. логотип остаётся на месте, а менюшки сбиваются в кучу справа, при этом оставаясь на "одной строке с логотипом!!!!
Я плохо понимаю флекс..
Какое свойство тут надо применить, чтобы при маленьком экране, логотип оставался на своей строке,
А навигационное меню переходило на другую строку?!
Или тут надо поступить как то по другому?!