Полное руководство по Flex Layout в CSS

Макеты Flex flexbox — это мощные макеты, которые легко управляют вертикальным и горизонтальным поведением элементов.

Чтобы использовать Flex, вам сначала понадобится гибкий контейнер. использоватьdisplay: flex;Создайте,flexэто CSSdisplayК свойству добавляется новое значение, и каждый дочерний элемент в контейнере становится гибким элементом. Флекс-элементы будут участвовать в гибком макете, и им будут доступны все свойства, определенные модулем макета гибкого блока CSS (модель макета гибкого блока CSS).

После настройки макета Flex дочерний элементfloat,clearа такжеvertical-alignСвойства будут недействительными.

Главные и поперечные оси

Контейнер имеет две оси, горизонтальная называется главной осью (Main-Axis), а вертикальная называется поперечной осью (Cross-Axis). Левая сторона главной оси — это начальное положение (основное начало), правая сторона — конечное положение (основной конец), поперечная ось — начальное положение (перекрестное начало), а нижняя сторона — конечное положение (перекрестное начало). конец). Мы используем свойство justify для управления расстоянием между элементами главной оси и свойство align для управления поведением по вертикали между элементами поперечной оси.

свойства контейнера

Контейнер имеет в общей сложности 6 свойств:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

flex-directionСвойство определяет ориентацию главной оси. Всего 4 значенияrow | row-reverse | column | column-reverse, начальное значение равноrow. Поперечная ось перпендикулярна главной оси, если ее значениеcolumnТогда поперечная ось является горизонтальным направлением.

rowпо умолчанию
row-reverseИзменить начальную точку вправо
columnОсновная ось вертикальная, начальная точка сверху
column-reverseОсновная ось вертикальна, а начальная точка находится ниже

flex-wrap

Указывает, должен ли flex-элемент отображаться в одной строке или в нескольких строках. Если перенос строк разрешен, это свойство позволяет управлять направлением укладки строк. Всего у него 3 значенияnowrap | wrap | wrap-reverse, начальное значение равноnowrap.

nowrapflex-элементы размещаются на одной строке, что может привести к переполнению flex-контейнера
wrapflex-элемент разбит на несколько строк

wrap-reverseа такжеwrapведет себя так же, ноcross-startа такжеcross-endобмен.

flex-flow

flex-directionа такжеflex-wrapсокращение для . По умолчаниюflex-flow: row nowrap;

justify-content

Определяет, как браузер распределяет пространство между гибкими элементами и вокруг них вдоль главной оси родительского контейнера. У него много свойств, но многие из них не используются повсеместно.

7 часто используемых атрибутов:

space-betweenРавномерно распределите гибкие элементы в каждом ряду. Расстояние между соседними элементами одинаковое. Первый элемент каждой строки выравнивается по началу строки, а последний элемент каждой строки выравнивается по концу строки.
space-aroundа такжеspace-betweenАналогично, но расстояние от первого элемента каждой строки до начала строки и расстояние от последнего элемента каждой строки до конца строки будет равно половине расстояния между соседними элементами
space-evenlyа такжеspace-aroundАналогично, но расстояние между соседними гибкими элементами, расстояние от начала основной оси до первого гибкого элемента и от конца основной оси до последнегоflexРасстояние между элементами, все точно так же
stretchЕсли сумма ширин гибких подэлементов больше, чем контейнер, каждый подэлемент масштабируется в соответствии со своим размером, чтобы заполнить контейнер.Если сумма минимальной ширины подэлементов больше, чем контейнер, контейнер будет растянут. Если сумма меньше, чем контейнер, это эквивалентноflex-start
flex-startРасположите от начала строки. Первый flex-элемент каждой строки выравнивается по началу строки, а все последующие flex-элементы выравниваются по предыдущему.
flex-endРасполагайте с конца строки. Последний гибкий элемент каждой строки выравнивается по концу строки, остальные элементы будут выравниваться по следующему
centerЭластичные элементы располагаются ближе к середине каждого ряда. Расстояние от первого элемента каждой строки до начала строки будет таким же, как расстояние от последнего элемента каждой строки до конца строки.

если это иflex-direction: column;В совокупности это будет выглядеть так:

align-items

Определяет, как элементы выравниваются по поперечной оси.

Он имеет в общей сложности 5 общих свойств.

flex-start
flex-end
center
stretch
baseline

align-content

Определяет выравнивание нескольких осей (несколько линий). Это свойство не влияет на однострочные модели flexbox. (т.е. с flex-wrap: nowrap).

Всего есть 6 общих свойств:

flex-startВыровнять с началом поперечной оси

flex-endВыровнять по конечной точке поперечной оси

centerВыровнять по середине поперечной оси

space-betweenВыровнены по обоим концам поперечной оси, расстояние между осями равномерно распределено

space-aroundРасстояние по обеим сторонам каждой оси одинаковое. Следовательно, расстояние между осями в два раза больше, чем расстояние между осями и рамой.

stretchВсе линии растягиваются, чтобы заполнить оставшееся пространство. Оставшееся пространство равномерно распределяется между каждой строкой (по умолчанию).

Свойства гибкого элемента

Flex-элемент имеет в общей сложности 6 свойств:

flex-basis
flex-grow
flex-shrink
flex
order
align-self

flex-basis

flex-basisа такжеmin-widthТочно так же задает начальный размер flex-элемента в направлении главной оси. (Если вы не используете box-sizing для изменения модели блока, то это свойство определяет ширину или высоту блока содержимого гибкого элемента.) Увеличивает размер элемента в соответствии с внутренним содержимым. В противном случае будет использоваться базовое значение по умолчанию.

flex-grow

Определяет коэффициент растяжения для гибкого элемента, который будет масштабироваться относительно суммы размеров всех других элементов в той же строке, которая будет автоматически корректироваться в соответствии с указанным значением. Его значениеnumber, отрицательные числа недействительны.

flex-shrink

Задает правила сжатия для flex-элементов. Гибкий элемент сжимается только тогда, когда сумма его ширин по умолчанию больше ширины контейнера, а его размер сжатия зависит от значения flex-shrink.

flex

этоflex-grow, flex-shrinkа такжеflex-basisсокращение для , по умолчанию0 1 auto. Последние два свойства являются необязательными.

order

Естественный порядок, используемый для перестановки элементов. элемент согласноorderСвойства располагаются в порядке возрастания их значений. имеют то же самоеorderЭлементы значений атрибутов выкладываются в том порядке, в котором они появляются в исходном коде.

align-self

выровняет flex-элементы в текущей flex-строке и покроетalign-itemsЗначение.Если направление боковой оси любого гибкого элементаmarginустановлено значениеauto, он будет игнорироватьalign-self.