Добро пожаловать на ИТ форум!

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

Регистрация

Как сделать чтобы логотип перескакивал на другую строку отделяясь от панели навигации?

SnowDi

New Member
Регистрация
09.06.2020
Сообщения
1
У меня слева логотип, справа на одной линии стоит навигационная панель.
Логотип и панель навигации обёрнуты в 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>
Я применил к header'y display: flex, с двумя целями во первых при большом экране
лого уйдёт влево, а панель меню в право( у меня так и вышло):
CSS:
display: flex;
    justify-content: space-between;
    align-items: center;
И второй момент, я думал что при маленьком экране логотип останется на одной строке, а меню переместится на другую строку.
Но! Всё работает совсем не так.. логотип остаётся на месте, а менюшки сбиваются в кучу справа, при этом оставаясь на "одной строке с логотипом!!!!
5edf8a60752ea513736260.jpeg

Я плохо понимаю флекс..
Какое свойство тут надо применить, чтобы при маленьком экране, логотип оставался на своей строке,
А навигационное меню переходило на другую строку?!
Или тут надо поступить как то по другому?!
 

BaNru

Пацифизжу
Регистрация
13.11.2010
Сообщения
3 914
Надо использовать flex-wrap: wrap;
 
Верх Низ