Що таке CSS Flexbox?
CSS Flexbox (Flexible Box Layout) — це одновимірна модель макета для розподілу простору та вирівнювання елементів у рядку або стовпці. Flex-контейнер задається за допомогою display: flex, а його прямі нащадки стають flex-елементами. Ключові властивості контейнера: flex-direction (рядок або стовпець), flex-wrap (один рядок vs. кілька рядків), justify-content (вирівнювання по головній осі), align-items (вирівнювання по поперечній осі для кожного рядка) і align-content (вирівнювання по поперечній осі кількох рядків). Ключові властивості елемента: flex-grow (наскільки елемент розтягується), flex-shrink (наскільки стискається), flex-basis (початковий розмір) і align-self (перевизначає align-items контейнера для конкретного елемента). Flexbox ідеально підходить для панелей навігації, рядів карток, центрованих макетів і будь-якого одновимірного розташування.
Як користуватися Генератором CSS Flexbox
-
Налаштуйте властивості контейнера (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) за допомогою випадаючих списків та поля вводу.
-
Натисніть на будь-який елемент у попередньому перегляді, щоб вибрати його (стає помаранчевим).
-
Встановіть flex-grow, flex-shrink, flex-basis і align-self вибраного елемента на панелі елемента.
-
Натисніть '+ Додати елемент', щоб додати елементи; натисніть 'Видалити', щоб видалити вибраний елемент.
-
Перемикайтеся між вкладками CSS і HTML, щоб переглянути згенерований код, потім натисніть Копіювати.
-
Натисніть 'Скинути все', щоб почати заново з макетом за замовчуванням із 3 елементів.