Flexbox, упрощает проектирование гибкой адаптивной структуры макета без использования поплавки или позиционирования.
Перед Flexbox были четыре режима макета:
- Блок, для разделов в веб-странице
- Встроенный, для текста
- Таблица для двумерных данных таблицы
- Расположены, для явного положения элемента
Пример:
HTML:
CSS:
Родительский элемент (контейнер)
Контейнер сгиба становится гибким путем настройки свойства отображения для Flex
FlexBox состоит из двух частей:
°container properties(parents) °item properties(Children)
Свойства контейнера Flex:
Flex-Direction Flex-Wrap Flex-Flase Tootfify-Contain-Align-Petes Align-Contelate
Свойства элемента Flex:
Заказать Flex-Root Flex-Shrink Flex-Base Flex Align-Self
Содержание выравнивания
°align-content: stretch; °align-content: flex-start; °align-content: flex-end; °align-content: center; °align-content: space-between; °align-content: space-around;
Свойство Align-Content является суб-свойством Flexbox.
Он помогает выровнять гибкие линии контейнера в нем, когда в поперечном оси есть дополнительное пространство, аналогично насколько обоснованным контентом выравнивают отдельные элементы в основной оси.
1- Растянуть ( по умолчанию ) Линии растягиваются, чтобы занять оставшееся пространство.
HTML
CSS.
2- Flex-Start Line упаковываются в начало контейнера.
HTML
CSS.
3- Flex-End Lines упаковываются в конец контейнера.
HTML
CSS.
4- Центр: линии упакованы в центр контейнера.
HTML
CSS.
5- пространство между линиями равномерно распределены; Первая строка находится в начале контейнера, в то время как последний находится в конце.
HTML
CSS.
6- космические линии равномерно распределены с равным пространством между ними.
HTML
CSS.
*align-items: stretch; *align-items: flex-start; *align-items: flex-end; *align-items: center; *align-items: baseline;
Это определяет поведение по умолчанию для того, как элементы Flex изложены вдоль поперечной оси на текущей линии.
1- Растянуть ( по умолчанию ) растягиваться, чтобы заполнить контейнер.
HTML
2- Flex-Start элементы размещаются в начале перекрестной оси.
HTML
3- Flex-End элементы размещены в конце кросс-оси.
HTML
4- центральные предметы центрируются в оси.
HTML
5- Базовые элементы выровнены, такие как их базовые линии.
HTML
*flex-wrap: nowrap; *flex-wrap: wrap; *flex-wrap: wrap-reverse;
По умолчанию Flex Petes все попытаются вписаться на одну строку.
1- NOWRAP ( по умолчанию ) Все предметы Flex будут на одной строке.
HTML
CSS.
2- Обертки Flex Petes будут обернуть на несколько строк, сверху вниз.
HTML
CSS.
3- Откатные элементы Flex будут обернуть на несколько строк снизу вверх.
HTML
CSS.
оправдание-контент
*justify-content: flex-start; *justify-content: flex-end; *justify-content: center; *justify-content: space-between; *justify-content: space-around;
Это определяет выравнивание вдоль основной оси. Это помогает распределить дополнительное свободное пространство, когда все элементы Flex на линии негиблируются или являются гибкими, но достигли их максимального размера. Он также оказывает некоторую контроль над выравниванием предметов, когда они переполняют линию.
1- Flex-start ( по умолчанию ) Tems упаковываются к началу направления Flex.
HTML
CSS.
2- Flex-End элементы упаковываются в конце направления Flex.
HTML
CSS.
3- центральные предметы сосредоточены по линии
HTML
CSS.
4- пространство между предметами равномерно распределены в линии; Первый элемент находится на старте, последний элемент на торцевой линии.
HTML
CSS.
5- Космические элементы равномерно распределяются в линии с равным пространством вокруг них.
HTML
CSS.
Гибкий направление
*flex-direction: row; *flex-direction: row-reverse; *flex-direction: column; *flex-direction: column-reverse;
1- ряд ( по умолчанию ) слева направо в LTR; Право налево в RTL.
Пример
HTML
CSS.
2- ROW-обратное право налево в LTR ; слева направо в RTL.
Пример
HTML
CSS.
3- Столбец такой же как ряд, а сверху вниз.
Пример
HTML
CSS.
4- реверс столбца такой же, как Row-Reverse, но снизу вверх.
Пример
HTML
Сгибание
*flex-shrink: 1; *flex-shrink: 0; *flex-shrink: 2;
Это определяет способность к удалению элемента Flex, если это необходимо.
Значение номера, но только отрицательные номера.
Пример:
Выравниваться
*align-self: auto; *align-self: stretch; *align-self: flex-start; *align-self: flex-end; *align-self: center; *align-self: baseline;
Это позволяет переопределить выравнивание по умолчанию для отдельных элементов Flex.
1- Автоматически сделает элемент идеально сосредоточенным в обеих осях.
См. Объяснение выравнивания, чтобы понять доступные значения
Пример:
Flex-база
*flex-basis: auto; *flex-basis: 80px;
Это определяет размер по умолчанию элемента до распределения оставшегося места.
1- Авто ( по умолчанию )
2- Длина (например, 20%, 5rem и т. Д.)
Пример:
порядок
*order: 0; *order: 1; *order: -1; *order: 9;
По умолчанию элементы Flex изложены в исходном порядке.
Пример:
Установите свойства (Contenify-Content) и (Align-Petes) для Центр И предмет Flex будет идеально сосредоточен.
Пример
HTML
CSS.
Больше примеров:
Важные примеры для всех предметов ⬇️
https://codepen.io/enxaneta/full/adLPwv
https://codepen.io/rikstar/post/flexbox
Следуй за мной на моей учетной записи Instagram https://www.instagram.com/karimcoda
Социальные сети: http://linktr.ee/karimcoda2.
Оригинал: «https://dev.to/karimcoda65/flexbox-in-css-the-first-post-in-2020-5gn3»