⭐ 0
🔍
Текст Зображення PDF та Документи Аудіо Музика Електросхемотехніка Час Корисні утиліти Валідатори Езотерика Ігри

Навбар на CSS Flexbox — логотип зліва, посилання справа

Візуальний конструктор макета CSS flexbox: flex-direction, justify-content, align-items, flex-wrap і gap контейнера, а також flex-grow, flex-shrink і flex-basis кожного дочірнього елемента — з живим прев'ю і готовим до копіювання CSS.

Опрацювання... 0%

Результат

Ця сторінка відкриває генератор flexbox із пресетом класичного навбару: justify-content виставлено на space-between, а align-items — на center. Покладіть логотип у перший блок і ряд посилань в останній (або розподіліть посилання по середніх блоках) — і flexbox-контейнер розсуне їх до протилежних країв панелі, тримаючи всі елементи на одній вертикальній осі, незалежно від висоти логотипа чи тексту посилань.

Саме space-between робить це можливим: він притискає перший дочірній елемент до початкового краю, а останній — до кінцевого, і розподіляє решту елементів між ними порівну — це і є форма «логотип зліва, посилання справа», яку використовує майже кожен хедер сайту. align-items: center тоді вирішує вертикальне вирівнювання, яке раніше потребувало хитрощів із line-height чи display: table-cell.

Підлаштуйте кількість дочірніх елементів під ваш реальний навбар — два блоки для голого логотипа з кнопкою дії, більше — для логотипа з кількома посиланнями — і подивіться, як макет підлаштовується наживо. Скопіюйте блок CSS, коли він збігається з вашим хедером, або відкрийте пресет space-between, щоб порівняти цю властивість із найближчими родичами.

🛡️
Локальна безпека (Browser)

Дані не залишають ваш пристрій. Конвертація відбувається на клієнті в межах браузера. Безпека гарантована.

Нюанси та Формати

  • Контроли контейнера: flex-direction, justify-content, align-items, flex-wrap і поле gap у пікселях, застосовані до прев'ю наживо.
  • Три кольорові дочірні блоки за замовчуванням (додайте до восьми, приберіть до двох), кожен зі своїми полями flex-grow, flex-shrink і flex-basis.
  • Готовий до копіювання блок CSS: правило .flex-container плюс по одному правилу .flex-item-N для кожного елемента з нетиповими flex-властивостями.

Наші переваги

✓ Кожен контроль контейнера і кожні flex-grow, flex-shrink та flex-basis дочірнього елемента миттєво оновлюють три пронумеровані прев'ю-блоки, тож ви бачите результат ваших flexbox-правил ще до того, як торкнетесь стилів.
✓ Генератор друкує лише ті правила дочірніх елементів, які справді відрізняються від типових значень CSS, тож скопійований код лишається коротким і читабельним, а не повторює flex-grow: 0 для кожного блоку.
✓ Пресет-сторінки одразу відкривають макети, які люди шукають за назвою: центрування div, навбар із логотипом зліва й посиланнями справа та рівні за шириною гнучкі колонки — відкрийте будь-яку, і тул уже налаштований.

Сценарії використання

  • • Отримайте точний CSS для центрування div і горизонтально, і вертикально, спостерігаючи, як justify-content і align-items працюють на живих прев'ю-блоках.
  • • Зберіть навбар «логотип зліва, посилання справа» через space-between і align-items: center, а тоді скопіюйте CSS контейнера просто у ваш компонент хедера.
  • • Порівняйте space-between, space-around і space-evenly поруч на тих самих трьох блоках замість того, щоб вгадувати, який відповідає потрібним проміжкам.