Навігаційна панель на CSS Flexbox — логотип ліворуч, посилання праворуч
Побудуйте flexbox-макет наочно: flex-direction, justify-content, align-items, flex-wrap і gap для контейнера, а також flex-grow, flex-shrink і flex-basis для кожного дочірнього елемента — усе з живим попереднім переглядом і готовим до копіювання CSS.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває передналаштування генератора flexbox для класичного макету навігаційної панелі: justify-content зі значенням space-between і align-items зі значенням center. Розмістіть логотип у першому блоці, а ряд навігаційних посилань — в останньому (або розподіліть посилання між середніми блоками), і flex-контейнер притисне їх до протилежних країв панелі, водночас тримаючи всі елементи на одній вертикальній осі, незалежно від висоти логотипа чи тексту посилань.
space-between — ось що змушує це працювати: він притискає перший дочірній елемент до початкового краю, а останній — до кінцевого, а решту рівномірно розподіляє між ними — саме так виглядає форма «логотип ліворуч, посилання праворуч», яку використовує майже кожен заголовок сайту. align-items: center потім вирішує вертикальне вирівнювання, яке раніше потребувало хитрощів із line-height або відображенням у вигляді таблиці.
Налаштуйте кількість дочірніх елементів відповідно до вашої реальної навігаційної панелі — два блоки для простого варіанту з логотипом і кнопкою, більше для логотипа з кількома посиланнями — і спостерігайте, як макет змінюється наживо. Скопіюйте блок CSS, щойно він відповідатиме вашому заголовку, або відкрийте передналаштування space-between, якщо хочете порівняти цю властивість із близькими аналогами.