Что такое 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 элементов.