Генератор Flexbox
Задайте властивості й прочитайте простою мовою, що вони насправді роблять.
- Працює у вашому браузері — ваш текст нікуди не надсилається
- Без реєстрації та квот, безкоштовно користуйтеся скільки завгодно
Як це працює
Flexbox не складний, але одна його особливість підводить майже всіх: justify-content і align-items не означають горизонталь і вертикаль. Вони означають уздовж напрямку й упоперек нього, а напрямок ви задаєте самі.
Пастка, сказана прямо
За flex-direction: row justify-content працює горизонтально, а align-items — вертикально. Перемкніть на column, і вони повністю міняються місцями. Кожна година, втрачена на flexbox, — це по суті саме це. Пояснення внизу оновлюється, коли ви змінюєте напрямок, щоб зв'язок було видно, а не заучувати.
Головна й поперечна осі
Головна вісь — та, вздовж якої розташовуються елементи, задається flex-direction. Поперечна вісь перпендикулярна до неї. justify-content розподіляє простір уздовж головної осі; align-items розміщує елементи на поперечній осі. Коли ці дві назви закарбуються, решта випливає сама.
gap і чому він замінив відступи
gap ставить простір між елементами, не додаючи його ззовні першого й останнього, а саме тут відступи помиляються і саме це люди колись виправляли хаками з :last-child. Він підтримується в кожному сучасному браузері, і більше немає причин його уникати.
nowrap означає стискати, а не переповнювати
За замовчуванням діє nowrap, і елементи стискаються нижче свого природного розміру, щоб вміститися, а не переходять на новий рядок. Саме тому текст іноді несподівано стискається всередині рядка flex. Налаштування wrap дозволяє елементам натомість переходити вниз; min-width: 0 для дочірнього елемента не дає йому стискатися менше за свій вміст.
Центрування в обох напрямках
justify-content: center з align-items: center центрує елемент в обох напрямках незалежно від flex-direction, і це єдина комбінація, яку варто запам'ятати напам'ять.
Генератор Flexbox — запитання
Чому align-items переміщує елементи по горизонталі?
Тому що flex-direction має значення column. Обидві властивості слідують за напрямком, а не за екраном.
У чому різниця між головною та поперечною віссю?
Головна вісь — напрямок, у якому розташовуються елементи, задається flex-direction. Поперечна вісь перпендикулярна до неї.
Як відцентрувати щось в обох напрямках?
justify-content: center разом із align-items: center.
Чому мій текст стиснутий?
Значення nowrap за замовчуванням стискає елементи, щоб вони вмістилися. Задайте flex-wrap: wrap або min-width: 0 для дочірнього елемента.
Чи можна використовувати gap із flexbox?
Так, у кожному сучасному браузері. Це краще за відступи, бо не додає простору по краях.