Постараюсь сделать минимальную шпаргалку по css flexbox.
upd. ага, фиг там, не получилось сделать кратенько.
Статья структурирована таким образом, чтобы содержание статьи было максимально полезным в навигации.
Полную документацию можно почитать на официальном ресурсе.
Выделю главное, для общего понимания.
Во всей этой flex-движухе есть всего два типа сущностей.
Flex-контейнер — это основной родительский контейнер, внутри которого надо навести порядок.
И flex-элементы — которые находятся внутри этого родительского контейнера, которые мы и хотим как-то упорядочить. Их еще иногда называют флексами.
У обеих сущностей есть свои свойства. Пройдемся по каждому.
Flex-контейнерные свойства
Свойства, присваиваемые только контейнеру.
display
С него-то и начинается вся история. Превращает обычный контейнер в волшебный, т.е. который будет работать по модели Flexbox.
Варианты значений:
:flex;— внутренние элементы будут вести себя как блоки,:inline-flex;— внутренние элементы будут вести себя как строки.
С двоеточиями и точкой с запятой пишу специально для легкости восприятия, что это значение аттрибута.
Просто добавляем родительскому блоку всего лишь одно свойство display: flex; и теперь внутри него можно творить чудеса.
.flex-container { //произвольное название класса
display: flex; //ну или inline-flex;
} flex-direction
Для контейнера. Не наследуется.
Задает направление главной оси, вдоль которой укладываются flex-элементы.
Варианты значений:
:row;— по умолчанию (т.е. можно не писать его), слева направо,:row-reverse;— в обратном порядке, справа налево,:column;— в столбик, вертикально, по умолчанию сверху вниз,:column-reverse;— тоже в столбик, но наоборот снизу вверх,:initial;— возвращает к значению по умолчанию,:inherit;— принимает значение свойства родительского элемента.
flex-wrap
Для контейнера. Не наследуется.
Говорит о том, будут ли флекс-элементы перенесены на новую строку или нет, а если и будут, то в каком порядке. По умолчанию flex-wrap запрещает перенос и все элементы щемятся в одну строку, поэтому если всем места не хватает, то они вылазят за рамки родительского контейнера. И только когда flex-wrap разрешает им переходить на новую строку, им удается вздохнуть полной грудью и пойти по строкам.
Варианты значений:
:nowrap;— запрещает перенос, это значение по умолчанию, а значит его можно вообще не писать. Все элементы пытаются уместиться в одной строке,:wrap;— самый обычный перенос, на новой строке элементы продолжают располагаться слева направо,:wrap-reverse;— перенос элементов происходит снизу вверх, но по-прежнему слева направо,:initial;— устанавливает значение по умолчанию,:inherit;— принимает значение свойства родительского элемента.
flex-direction + flex-wrap = flex-flow
Для контейнера. Не наследуется.
Два предыдущих свойства можно объединить в одно и получится flex-flow.
Синтаксис:
flex-flow: row wrap; — причем неважно в какой последовательности написаны значения. Flex-flow прекрасно понимает и так и так.
Разумеется, свойства по умолчанию можно не писать. То есть в этом примере row можно было бы упустить, получилось бы flex-flow: wrap; и прекрасно всё работает.
Варианты значений:
- комбинации значений свойств
flex-directionиflex-wrap, — по умолчаниюrowиnowrap; :initial;— устанавливает значение по умолчанию. То же самое, что:row nowrap;:inherit;— принимает значение свойства родительского элемента.
justify-content
Для контейнера. Не наследуется.
Выравнивает флекс-элементы по главной оси. Очень похоже на text-align.
Варианты значений:
:flex-start;— по умолчанию. Флекс-элементы начинают строиться от начальной линии контейнера,:flex-end;— то же самое, только от конечной,:center;— выравниваются по центру,:space-between;— свободное пространство равномерно распределяется в промежутках между элементами, при этом начальный и конечный элементы прилеплены к краям, без отступов,:space-around;— свободное пространство равномерно «окутывает» каждый элемент, поэтому боковые уже не прилеплены к краям, а с отступами,:initial;– устанавливает значение по умолчанию,:inherit;– принимает значение свойства родительского элемента.
Синтаксис:
.flex-container {
display: flex;
justify-content: flex-start;
} align-items и align-self
Для контейнера. Не наследуется.
Определяет выравнивание элементов по поперечной оси. К примеру, если все элементы располагаются по горизонтали, то эти свойства выравнивают элементы по вертикали, и наоборот.
align-item — для всех элементов в контейнере,
align-self — для единичного элемента.
Но, если у какого-то элемента стоит свойство margin:auto; , то оно в приоритете. Разумеется, имеются ввиду марджины, сонаправленные поперечной оси.
Варианты значений align-item:
:stretch;— значение по умолчанию. Растягивает элемент на всю строку в поперечном направлении, если никакойmarginне мешает, марджин в приоритете,:flex-start;и:flex-end;— элементы прижимаются к начальной или конечной линиям соответственно,:center;— выравнивание по центру строки,:baseline;— базовые линии всех элементов выравниваются по одной линии,:initial;– устанавливает значение по умолчанию,:inherit;– принимает значение свойства родительского элемента.
Синтаксис:
.flex-container {
display: flex;
align-items: flex-start;
} Варианты значений align-self:
:stretch;— значение по умолчанию. Растягивает элемент на всю строку в поперечном направлении, если никакойmarginне мешает, марджин в приоритете,:flex-start;и:flex-end;— элементы прижимаются к начальной или конечной линиям соответственно,:center;— выравнивание по центру строки,:baseline;— базовые линии всех элементов выравниваются по одной линии,:initial;– устанавливает значение по умолчанию,:inherit;– принимает значение свойства родительского элемента.
align-content
Для контейнер. Не наследуется.
Выравнивает все строки по поперечной оси.
Варианты значений:
:flex-start;— первая строка прижимается к стартовой линии контейнера и от нее укладываются остальные строки,:flex-end;— наоборот, последняя ст рока прижимается к конечной линии контейнера и от нее укладываются остальные строки, как бы в обратно порядке,:center;— строки укладываются от центра,:space-between;— все строки распределяются равномерно. Край первой строки прижимается к начальному краю контейнера, край последней строки — к последнему краю контейнера. И свободное пространство равномерно делится между строками. Но если все строки не хватает всем пространства (не влезают), то всё работает как приflex-start,:space-around;— свободное пространство равномерно «окутывает» каждую строку, поэтому первая и последняя строки уже не прижаты вплотную к краям контейнера, а с отступами. Если все не влезают, тогда работает как приcenter, то есть все щемятся и вся эта компания держится по центру,:initial;– устанавливает значение по умолчанию,:inherit;– принимает значение свойства родительского элемента.
Flex-элементные свойства
Свойства для flex-элементов.
Order
Для элементов. Не наследуется.
Определяет порядок расположения flex-элементов. Как индекс.
Логика простая — по умолчанию все элементы имеют order: 0; Если какому-то элементу присвоить индекс -1;, то он переместится в начало строки, как с самым наименьшим индексом. А если 1, то в самый конец.
При одинаковом индексе, элементы располагаются в той обычной последовательности, в которой они написаны в коде html.
Варианты значений:
:число;— целое число, по умолчанию у всех 0.:initial;– устанавливает значение по умолчанию,:inherit;– принимает значение свойства родительского элемента.
Синтаксис:
.flex-container {
display: flex;
}
.flex-item {
order: 1;
} flex
Для элементов. Не наследуемое.
Объединяет в себе три свойства flex-grow , flex-shrink и flex-basis. Значения по умолчанию flex: 0 1 auto;
Можно указывать как одно, так и все три значения. Но W3C рекомендует использовать именно его, а не свойства по отдельности, т.к. оно правильно сбрасывает не указанные значения, подстраивает под наиболее вероятное использование.
Варианты значений:
:коэффициент растяжения;— значение от свойстваflex-grow,целое или дробное число, показывающее насколько элемент должен растягиваться по отношению к другим элементам,:коэффициент сжатия;— значение от свойстваflex-shrink, то же самое только для сжатия,:начальный размер;— число, определяющее начальную ширину элемента, похожее наmin-width;:initial;– устанавливает значение по умолчанию, аналогflex: 0 1 auto;,:inherit;– принимает значение свойства родительского элемента.
Синтаксис:
.flex-container {
display: flex;
}
.flex-item {
flex: 5 1 10px;
} flex-grow
Для элементов. Не наследуется.
Определяет, сколько пропорционально достанется каждому элементу свободного пространства.
Внимание! Это не размер элемента! Это именно коэффициент растяжения.
flex-grow работает именно со свободным пространством.
По умолчанию для всех элементов значение 0, и если какому-то одному элементу присвоили 1 , значит всё свободное пространство отдается ему. Здесь 1 это как 100%, то есть flex-grow может принимать и дробные значения.
Если для всех установлено значение 1, тогда всем достанется поровну. Если какой-то получил значение 2, то ему достанется в 2 раза больше, чем остальным.
Варианты значений:
:число;— положительное целое или дробное. По умолчанию0.:initial;– устанавливает значение по умолчанию,:inherit;– принимает значение свойства родительского элемента.
Синтаксис:
.flex-container {
display: flex;
}
.flex-item {
flex-grow: 1; //свободное пространство поровну для всех элементов
} flex-shrink
Для элементов. Не наследуется.
Коэффициент сжатия элементов в случае недостатка места. А вот это свойство уже реально действует на сами элементы.
Происходит это так — коэффициент умножается на flex-basis (размер по сути), что справедливо. Ведь, чем больше элемент, тем больше он может сжаться. Поэтому сжатие на бо’льшем элементе будет заметнее, чем на мелком. Налоги на роскошь, так сказать.
Варианты значений:
:число;— положительное целое или дробное. По умолчанию0.:initial;– устанавливает значение по умолчанию,:inherit;– принимает значение свойства родительского элемента.
Синтаксис:
.flex-container {
display: flex;
}
.flex-item {
flex-shrink: 1;
} flex-basis
Для элементов. Не наследуется.
Устанавливает начальный размер (по сути ширину) элемента, до действия свойств гибкости (flex-grow и flex-shrink).
Варианты значений:
:auto;— значение по умолчанию. Элемент получает ширину содержимого (если он не задан явно),:content;— значение по умолчанию. Элемент получает ширину содержимого.:initial;– устанавливает значение по умолчанию,:inherit;– принимает значение свойства родительского элемента.
Синтаксис:
.flex-container {
display: flex;
}
.flex-item {
flex-basis: 200px;
} Фуух, вот это статейка получилась, три дня перерабатывал материал с разных сайтов. Кстати, пока разбирал материал, нашел ошибки на лидирующих, казалось бы, сайтах в этой теме (типа htmlbook, html5book и др.). Вот что значит погрузиться в тему с головой.
Теперь нужно разобрать css grid.
Обязательно нажмите кнопку, была ли статья полезна или нет.