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

justify-content: space-between пояснено (CSS)

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

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

Результат

Ця сторінка відкриває генератор із justify-content, виставленим на space-between: перший блок лягає впритул до початкового краю контейнера, останній — впритул до кінцевого, а вільне місце ділиться на рівні проміжки між блоками посередині — ніколи перед першим і ніколи після останнього.

Саме тут людей найчастіше плутає. space-around дає кожному блоку однакове поле з обох боків, тож проміжки між блоками виходять удвічі ширшими за проміжки на двох зовнішніх краях (кожен край отримує поле лише одного блоку, а не двох). space-evenly йде далі й робить усі проміжки однаковими, включно з обома зовнішніми краями — єдиний з трьох варіантів, де відстані виглядають ідеально рівномірними по всій довжині.

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

🛡️
Локальна безпека (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 поруч на тих самих трьох блоках замість того, щоб вгадувати, який відповідає потрібним проміжкам.