Шпаргалка Модуль css Flexbox
Предисловие
Модуль css Flexbox Layout ( Flexible Box Layout Module ) на сегодня применим во всех последних версиях популярных браузеров, кроме IE. В IE применение ограничено.
Flexbox, модуль макета гибкого контейнера, позволяет аккуратно выполнять верстку, не заботясь о длине колонок. Что очень важно. Элементы контейнера могут пропорционально растягиваться и сжиматься. На мой взгляд — вещь приятная и весьма полезная адаптивному дизайну. Предыдущий шаблон этого сайта, а также шаблон моей cms - kalinka приспособлен к работе с разными устройствами и сделан на флексах.
Свойства flexbox
Свойства есть как для родительского элемента, так и для дочерних. Родительским элементом будет некий флекс-контейнер, дочерними — флекс - элементы. Элементы вложены в контейнер.
Flexbox на примерах:
Родительский элемент flex — контейнер
display : flex;
Например, для div id=“box“ в файл css впишем
По умолчанию flex — flow: row, nowrap; justify — content: flex — start; align — items: stretch;
К родительскому элементу, например, элементу класса container, применяются следующие свойства:
flex — flow
Объединенное свойство flex — direction и flex — wrap.
По умолчанию: row, nowrap.
flex — direction
.container {
flex — direction: row | row — reverse | column | column — reverse;
}
flex — direction задает направление оси расположения флекс — элементов.
По умолчанию: row;
row — все флекс — элементы располагаются в одну строку, для русского - слева направо.
Reverse — это противоположное направление. Поэтому, row — reverse флекс - элементы расположены справа налево.
column - флекс — элементы расположены вертикально, сверху вниз.
column — reverse — флекс — элементы расположены вертикально, снизу вверх.
Вид:
Свойства по умолчанию
.examplebox {display : flex;}
Вертикальное расположение
display : flex;
flex-direction: column;
flex — wrap
.container {
flex — wrap: nowrap | wrap | wrap-reverse;
}
Указывает расположение элементов в одну или несколько строк. Бывает, что число элементов нельзя разместить в контейнере в одну строку, тогда часть элементов переносится с помощью этого свойства, на следующую строку.
По умолчанию: nowrap;
nowrap — все флекс — элементы расположены в одной строке.
wrap - флекс — элементы могут быть перенесены на другие строки, сверху вниз.
wrap — reverse - элементы могут быть перенесены на другие строки, снизу вверх.
Вид:
flex-wrap
display : flex;
flex-wrap: wrap;
4
justify — content
При необходимости определяет расположение элементов относительно горизонтальной оси контейнера.
.container {
justify — content: flex — start | flex — end | center | space — between | space — around;
}
По умолчанию flex — start;
flex — start прижимает флекс -элементы к левому краю при письме слева направо.
flex — end прижимает флекс -элементы к правому краю при письме слева направо.
center располагает флекс — элементы по центру экрана;
space — between флекс — элементы равномерно распределены по экрану. Левый прижат к левому краю, правый — к правому;
space — around крайние элементы расположены на равном расстоянии от краев экрана. Оставшееся пространство распределено между элементами.
Вид:
justify-content
display : flex;
justify-content: center;
display : flex;
justify-content: flex-end;
display : flex;
justify-content: space-between;
display : flex;
justify-content: space-around;
align — items
При необходимости определяет расположение элементов относительно вертикальной оси контейнера
.container {
align — items: flex — start | flex — end | center| baseline | stretch;
}
По умолчанию stretch, элементы растягиваются так, чтобы заполнить весь контейнер.
flex — start прижимает элементы к верхней части контейнера;
flex — end прижимает элементы к нижней части контейнера;
center выравнивает элементы по центру;
baseline выравнивает элементы по базовой линии.
Вид:
align-items
display : flex;
align-items: flex-start;
display : flex;
align-items: flex-end;
display : flex;
align-items: stretch;
Дочерние элементы — Флекс-элементы
Флекс — элементы по умолчанию располагаются в порядке натурального ряда. Например, если мы имеем 4 элемента, они расположатся в порядке 1, 2, 3, 4.
order
Свойство изменяет порядок флекс - элементов внутри контейнера. Класс присваивается элементу.
.item {
order: integer;
}
Вид:
Order
flex-grow
Определяет возможность элемента растягиваться в заданном порядке.
По умолчанию: 0. Если все элементы имеют значение 1, то свободное пространство равномерно распределяется в контейнере. Если один из элементов будет иметь значение 2, то указанный элемент будет растянут на вдвое большую ширину.
Вид:
flex - grow
flex-basis
Определяет размер элемента по умолчанию. Размер может быть указан как размерная единица (пкс, мм, %), 0 или auto.
По умолчанию: auto.
Вид:
flex - basis
flex-basis: 120px
flex-basis: 0
flex-basis: auto
flex
.item {
flex: none | flex — grow (flex — shrink || flex — basis )
}
Сокращенная запись. Рекомендуется к применению.
По умолчанию: 0 1 auto;
При задании свойств, отличных от свойств по умолчанию, flex — grow указывать обязательно, остальные можно не указывать.
Вид:
flex: 1;
.examplebox {display : flex;}
Итоги
В этой статье я изложила основные свойства модуля css Flexbox. Модуль удобно использовать для отдельных элементов страницы. Вместе со свойством grid Flexbox позволяет делать оптимальную адаптивную верстку.
Родионова Галина Евгеньевна2019-02-06