Flexbox, также называемый модулем Flexible Box, является одной из двух современных систем макетов наряду с CSS Grid.
- Вступление
- Поддержка браузера
- Включить Flexbox
- Свойства контейнера
- Свойства, применимые к каждому отдельному элементу
Вступление
Flexbox, также называемый модулем Flexible Box, является одной из двух современных систем макетов, наряду с CSS Grid.
По сравнению с CSS Grid (двумерным) flexbox - этоодномерная компоновочная модель. Он будет управлять макетом на основе строки или столбца, но не вместе одновременно.
Основная цель flexbox - позволить элементам заполнить все пространство, предлагаемое их контейнером, в зависимости от некоторых установленных вами правил.
Если вам не нужна поддержка старых браузеров, таких как IE8 и IE9, Flexbox - это инструмент, который позволяет забыть об использовании
- Макеты таблиц
- Поплавки
- clearfix хаки
display: table
хаки
Давайте погрузимся в flexbox и за очень короткое время станем им мастером.
Поддержка браузера
На момент написания (февраль 2018 г.) его поддерживали 97,66% пользователей, все наиболее важные браузеры реализуют его на протяжении многих лет, поэтому охватываются даже старые браузеры (включая IE10 +):
Хотя мы должны подождать несколько лет, пока пользователи наверстают упущенное с CSS Grid, Flexbox - более старая технология, и ее можно использовать прямо сейчас.
Включить Flexbox
Макет flexbox применяется к контейнеру путем установки
display: flex;
или же
display: inline-flex;
Контентвнутри контейнерабудет выровнен с помощью flexbox.
Свойства контейнера
Некоторые свойства flexbox применяются к контейнеру, который устанавливает общие правила для его элементов. Они есть
flex-direction
justify-content
align-items
flex-wrap
flex-flow
Выровнять строки или столбцы
Первое свойство, которое мы видим,flex-direction
, определяет, должен ли контейнер выравнивать свои элементы как строки или как столбцы:
flex-direction: row
размещает предметы какряд, в направлении текста (слева направо для западных стран)flex-direction: row-reverse
размещает предметы так же, какrow
но в обратном направленииflex-direction: column
помещает предметы встолбец, заказывая сверху внизflex-direction: column-reverse
помещает элементы в столбец, как иcolumn
но в обратном направлении
Вертикальное и горизонтальное выравнивание
По умолчанию элементы начинаются слева, еслиflex-direction
являетсяrow
, и сверху, еслиflex-direction
являетсяcolumn
.
Вы можете изменить это поведение, используяjustify-content
для изменения горизонтального выравнивания иalign-items
для изменения вертикального выравнивания.
Измените горизонтальное выравнивание
justify-content
имеет 5 возможных значений:
flex-start
: выровнять по левой стороне контейнера.flex-end
: выровнять по правой стороне контейнера.center
: выровнять по центру контейнера.space-between
: отображать с равным интервалом между ними.space-around
: отображать с равным интервалом вокруг них
Измените вертикальное выравнивание
align-items
имеет 5 возможных значений:
flex-start
: выровнять по верху контейнера.flex-end
: выровнять по дну контейнера.center
: выровнять по вертикальному центру контейнера.baseline
: отображать на базовой линии контейнера.stretch
: элементы растягиваются по размеру контейнера.
Примечание оbaseline
baseline
выглядит похоже наflex-start
в этом примере из-за того, что мои коробки слишком просты. Проверитьэтот Codepenчтобы иметь более полезный пример, который я разветвил из пера, изначально созданногоМартин Михалек. Как видите, размеры предметов выровнены.
Сворачивать
По умолчанию элементы в контейнере flexbox хранятся в одной строке, сжимая их, чтобы поместиться в контейнер.
Чтобы заставить элементы распределиться по нескольким строкам, используйтеflex-wrap: wrap
. Это распределит элементы в соответствии с порядком, установленным вflex-direction
. Использоватьflex-wrap: wrap-reverse
чтобы изменить этот порядок.
Сокращенное свойство, называемоеflex-flow
позволяет указатьflex-direction
иflex-wrap
в одну строку, добавивflex-direction
сначала значение, затемflex-wrap
значение, например:flex-flow: row wrap
.
Свойства, применимые к каждому отдельному элементу
С этого момента мы увидели свойства, которые можно применить к контейнеру.
Отдельные элементы могут обладать определенной степенью независимости и гибкости, и вы можете изменять их внешний вид, используя эти свойства:
order
align-self
flex-grow
flex-shrink
flex-basis
flex
Посмотрим на них подробнее.
Перемещение предметов до / после другого с использованием порядка
Товары упорядочиваются в соответствии с порядком их назначения. По умолчанию каждый товар имеет порядок0
а внешний вид в HTML определяет окончательный порядок.
Вы можете переопределить это свойство, используяorder
по каждому отдельному пункту. Это свойство, которое вы устанавливаете для элемента, а не для контейнера. Вы можете сделать так, чтобы элемент отображался раньше всех, установив отрицательное значение.
Вертикальное выравнивание с помощью align-self
Элемент может выбратьотвергатьконтейнерalign-items
установка, используяalign-self
, который имеет те же 5 возможных значенийalign-items
:
flex-start
: выровнять по верху контейнера.flex-end
: выровнять по дну контейнера.center
: выровнять по вертикальному центру контейнера.baseline
: отображать на базовой линии контейнера.stretch
: элементы растягиваются по размеру контейнера.
При необходимости увеличьте или уменьшите предмет
гибкий рост
The defaut for any item is 0.
Если все элементы определены как 1, а один определен как 2, более крупный элемент займет пространство двух элементов «1».
гибко-усадочный
The defaut for any item is 1.
Если все элементы определены как 1, а один определен как 3, более крупный элемент будет уменьшаться в 3 раза по сравнению с другими. Когда доступно меньше места, потребуется в 3 раза меньше места.
гибкая основа
Если установлено наauto
, он изменяет размер элемента в соответствии с его шириной или высотой и добавляет дополнительное пространство в зависимости отflex-grow
свойство.
Если установлено значение 0, при расчете макета дополнительное пространство для элемента не добавляется.
Если вы укажете числовое значение пикселя, оно будет использовать его как значение длины (ширина или высота зависит от того, является ли это строкой или элементом столбца).
сгибать
Это свойство сочетает в себе 3 вышеупомянутых свойства:
flex-grow
flex-shrink
flex-basis
и предоставляет сокращенный синтаксис:flex: 0 1 auto
Скачать мою бесплатнуюСправочник CSS
Больше руководств по css:
- Руководство по Flexbox
- Учебник по CSS Grid
- Переменные CSS (настраиваемые свойства)
- Введение в PostCSS
- Свойство поля CSS
- Как центрировать элемент с помощью CSS
- Системные шрифты CSS
- Как напечатать HTML со стилем
- Вводное руководство по переходам CSS
- Учебник по CSS-анимации
- Введение в CSS
- Руководство по CSS
- Как настроить Tailwind с PurgeCSS и PostCSS
- Шпаргалка по попутному ветру
- Как непрерывно вращать изображение с помощью CSS
- Как сделать таблицу адаптивной с помощью CSS
- Как отлаживать CSS путем деления пополам
- Селекторы CSS
- CSS-каскад
- Специфика CSS
- Селекторы атрибутов CSS
- Цвета CSS
- Единицы CSS
- URL-адрес CSS ()
- CSS Типографика
- Коробочная модель CSS
- Свойство CSS position
- CSS Media Queries и адаптивный дизайн
- Запросы функций CSS
- CSS преобразования
- Как стилизовать списки с помощью CSS
- Префиксы поставщиков CSS
- Наследование CSS
- Псевдоклассы CSS
- Псевдоэлементы CSS
- Стилизация HTML-таблиц с помощью CSS
- Свойство CSS Display
- Функция CSS calc ()
- CSS Границы
- Импорт файла CSS с помощью @import
- Обработка ошибок CSS
- CSS фильтры
- CSS Размер окна
- CSS-фоны
- Комментарии CSS
- CSS шрифты
- CSS Padding
- CSS свойство float и очистка
- CSS нормализация
- Свойство CSS z-index
- Как отключить выделение текста с помощью CSS
- Как разместить элемент в нижней части контейнера с помощью CSS
- Как инвертировать цвета с помощью CSS
- Адаптивные предварительные теги в CSS
- Адаптивные вставки видео YouTube
- Каковы хорошие значения контрольной точки CSS для адаптивного дизайна?
- Как выровнять центр в flexbox