Генератор CSS Flexbox
Генератор CSS Flexbox дає змогу задати для контейнера flex-direction, justify-content, align-items, flex-wrap, align-content і gap, переглядати до 20 елементів наживо та скопіювати згенерований CSS.
Про цей інструмент
Генератор CSS Flexbox дає змогу задати для контейнера flex-direction, justify-content, align-items, flex-wrap, align-content і gap, переглядати до 20 елементів наживо та скопіювати згенерований CSS.
Як користуватися
- Виберіть напрямок і перенесення.
- Задайте justify-content і align-items (та align-content для кількох рядків).
- Задайте gap і кількість елементів для перегляду.
- Натисніть «Копіювати CSS», щоб використати правила контейнера.
Корисно знати
- justify-content вирівнює елементи вздовж головної осі; align-items — вздовж поперечної.
- flex-direction: column міняє осі місцями, тож justify-content тоді працює вертикально.
- align-content діє лише тоді, коли елементи переносяться на кілька рядків.
- Властивість gap працює у Flexbox в усіх сучасних основних браузерах.
- Flexbox одновимірний; для рядків і стовпців одночасно використовуйте CSS Grid.
Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.
Поширені запитання
Як відцентрувати div за допомогою Flexbox?
Задайте батьківському елементу display: flex; justify-content: center; align-items: center; — дочірній елемент буде по центру горизонтально й вертикально.
Чим justify-content відрізняється від align-items?
justify-content розподіляє елементи вздовж головної осі (за замовчуванням це рядок); align-items розташовує їх уздовж поперечної осі.
Коли краще Flexbox, а коли Grid?
Flexbox — для одновимірних макетів, як-от навігаційні панелі та ряди кнопок, а Grid — для двовимірних макетів сторінок.
Чому align-content нічого не робить?
align-content застосовується лише тоді, коли flex-wrap дозволяє елементам переноситися більш ніж на один рядок.