⭐ 0
🔍
Текст Изображение PDF и Документи Аудио Музика Електроника Време Полезни програми Валидатори Езотерика Игри

CSS Flexbox Navbar — лого отляво, връзки отдясно

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

Обработка... 0%

Резултат

Тази страница отваря предварително зададения генератор на flexbox към класическото оформление на навигационната лента: justify-content, настроено на интервал между и align-items, настроено в центъра. Поставете лого в първото поле и ред връзки за навигация в последното (или разделете връзките в средните полета) и контейнерът flexbox ги избутва към противоположните краища на лентата, като същевременно поддържа всеки елемент подреден в същия вертикален център, без значение колко високо е логото или текстът на връзката.

space-between е това, което прави тази работа: тя закрепва първото дете към началния ръб и последното дете към крайния ръб, след което разпределя всички останали деца равномерно между тях - точно формата на лявото лого, дясната форма на връзките, използвана от почти всеки хедър на сайта. align-items: center след това разрешава вертикалното подравняване, което преди се нуждаеше от хакове за височина на реда или трикове за показване на клетка в таблица.

Adjust the child count to match your real navbar — two boxes for a bare logo-and-CTA bar, more for logo plus several links — and watch the layout adapt live. Копирайте CSS блока, след като съвпадне с вашия хедър, или отворете предварително зададеното пространство между, ако искате да видите това едно свойство в сравнение с неговите близки роднини.

🛡️
Изпълнява се в браузъра

Вашите файлове и данни никога не напускат това устройство. Обработката се извършва изцяло офлайн. 100% сигурно.

Приети формати и правила

  • Контроли на контейнера: flex-direction, justify-content, align-items, flex-wrap и въвеждане на пропуски в пиксели, приложени на живо към визуализацията.
  • Три цветно кодирани дъщерни кутии по подразбиране (добавете до осем, премахнете до две), всяка със собствени полета за гъвкаво нарастване, гъвкаво свиване и гъвкава основа.
  • Копируем 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 върху полетата за визуализация на живо.
  • • Изградете оформление на навигационната лента с лого вляво, връзки вдясно с интервал между и подравняване на елементи: център, след което копирайте CSS контейнера направо в компонента на заглавката.
  • • Сравнете разстоянието между, разстоянието наоколо и равномерното пространство една до друга на едни и същи три кутии, вместо да гадаете коя отговаря на желаното от вас разстояние.