Что такое justify content в css

СSS Свойство justify-content

Пример

Выровнить гибкие элементы по центру контейнера:

Определение и использование

Свойство justify-content выравнивает элементы гибкого контейнера, когда элементы не используют все доступное пространство на главной оси (по горизонтали).

Совет: Используйте свойство align-items выравнивать элементы по вертикали.

Значение по умолчанию:	flex-start
Унаследованный:	нет
Анимируемый:	нет Прочитайте о animatable
Версия:	CSS3
JavaScript синтаксис:	object.style.justifyContent=»space-between» Попробовать

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

CSS Синтаксис

Значение свойств

Значение	Описание	Воспроизвести
flex-start	Значение по умолчанию. Элементы располагаются в начале контейнера	Воспроизвести »
flex-end	Элементы располагаются в конце контейнера	Воспроизвести »
center	Элементы расположены в центре контейнера	Воспроизвести »
space-between	Элементы позиционируются с пробелом между строками	Воспроизвести »
space-around	Элементы размещаются с пробелом до, между и после строк	Воспроизвести »
initial	Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial	Воспроизвести »
inherit	Наследует это свойство от родительского элемента. Прочитайте о inherit

Примеры

Пример

Выровнить гибкие элементы в начале контейнера (это значение по умолчанию):

Пример

Выровняйте гибкие элементы в конце контейнера:

Пример

Отображение гибких элементов с пробелом между строками:

Пример

Отображение гибких элементов с пробелами до, между и после строк:

Источник

Flexbox justify-content: полное руководство по центрированию

Дата публикации: 2019-07-31

От автора: Flexbox — это популярный модуль макета CSS, который помогает позиционировать элементы HTML на экране. Есть много сценариев использования, когда он может оказаться настоящей находкой; горизонтальное и вертикальное центрирование из их числа. Центрирование Flexbox justify-content решает стандартные проблемы выравнивания, с которыми вы можете столкнуться при работе с традиционной блочной моделью CSS. Это позволяет центрировать элементы внутри их контейнера как по горизонтали, так и по вертикали с помощью всего лишь нескольких строк кода CSS.

Макеты Flexbox на основе рядов и столбцов

Flexbox — это модуль одномерного макета, это означает, что ваши макеты основаны на строках или столбцах. Вы можете установить направление макета, используя свойство flex-direction, которое необходимо использовать во flex-контейнере. Оно может принимать четыре значения: row, row-reverse, column и column-reverse. Вот как на экране выглядят четыре разных направления flex:

Flex-макет на основе рядов (по умолчанию):

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Реверсивный макет на основе рядов:

Flex-макет на основе столбцов:

Реверсивный макет на основе столбцов:

Как работает центрирование Flexbox?

Фактически, flexbox не использует понятия «горизонтальное» и «вертикальное» центрирование. Вместо этого он работает с основной и поперечной осями, которые на экране выглядят как горизонтальное и вертикальное центрирование. Направление основной и поперечной осей зависит от значения вышеупомянутого свойства flex-direction.

В макетах flexbox на основе рядов (row и row-reverse) основная ось проходит в горизонтальном направлении, а поперечная — в вертикальном. С другой стороны, в макетах flexbox на основе столбцов (column и column-reverse) основная ось проходит вертикально, а поперечная ось — горизонтально. Если вы хотите узнать больше о том, как работают оси flexbox, ознакомьтесь с документацией по Flexbox на MDN.

Когда мы говорим о центрировании flexbox, мы имеем в виду два вида центрирования:

Центрирование вдоль основной оси (также называемой осью блока).

Центрирование вдоль поперечной оси (также называемой линейной осью).

Если вам нужен идеально отцентрированный flex-элемент, вы должны отцентрировать его вдоль обеих осей.

Центрирование вдоль основной оси

Вам необходимо использовать свойство justify-content для центрирования flex-элементов вдоль главной оси. Значением по умолчанию — flex-start, которое выравнивает все элементы внутри контейнера flex по началу главной оси. Если вы хотите центрировать элементы, вам нужно использовать его со значением center.

В случае макетов на основе строк следующий код CSS центрирует элементы по горизонтали (так как здесь, главная ось также проходит горизонтально):

Источник

justify-content

Поддержка браузерами

Описание

CSS свойство justify-content указывает, каким образом будут выравниваться flex-элементы по горизонтали, внутри flex-контейнера.

Примечание: для выравнивания flex-элементов по вертикали используйте свойство align-items.

Значение по умолчанию:	flex-start
Применяется:	к flex-контейнерам
Анимируется:	нет
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.justifyContent=»space-between»;

Синтаксис

Значения свойства

Значение	Описание
flex-start	Значение по умолчанию. flex-элементы располагаются друг за другом слева направо, прилегая к левой границе flex-контейнера.
flex-end	flex-элементы располагаются друг за другом слева направо, прилегая к правой границе flex-контейнера.
center	flex-элементы располагаются друг за другом точно по центру flex-контейнера, то есть слева и справа от элементов расстояние до границ контейнера будет одинаковым.

Примечание: если flex-элементы занимают больше горизонтального пространства, чем ширина контейнера, то элементы сместятся так, чтобы переполнение было одинаковым с обоих сторон контейнера.

space-betweenflex-элементы равномерно распределяются по горизонтали так, чтобы между каждой парой соседних элементов расстояние было одинаковым. Первый элемент прилегает своей левой границей к левой границе контейнера, а последний элемент прилегает своей правой границей к правой границе контейнера.

Примечание: если flex-элементы занимают больше горизонтального пространства, чем ширина контейнера, или flex-элемент всего один, то данное значение будет соответствовать значению flex-start.

space-aroundflex-элементы равномерно распределяются по горизонтали так, чтобы между каждой парой соседних элементов расстояние было одинаковым. Пустое пространство перед первым и после последнего элемента равно половине расстояния между каждой парой соседних элементов.

Примечание: если flex-элементы занимают больше горизонтального пространства, чем ширина контейнера, или flex-элемент всего один, то данное значение будет соответствовать значению center.

Источник

Все, что вам нужно знать о выравнивании во Flexbox

Цикл публикаций по особенностям CSS-технологии Flexbox от Rachel Andrew.

Резюме

В этой статье мы рассмотрим свойства выравнивания во Flexbox, а также основные правила, помогающие запомнить, как работает выравнивание как на главной, так и на поперечной оси.

В первой статье этой серии я объяснила, что происходит при объявлении display: flex для элемента. На этот раз мы рассмотрим свойства выравнивания и их работу с Flexbox. Если вы когда-либо были в замешательстве относительно того, когда выполнять align, а когда justify, я надеюсь, что эта статья снимет все вопросы!

История Flexbox выравнивания

За всю историю CSS компоновки возможность правильного выравнивания элементов по обеим осям казалась мне действительно самой сложной проблемой веб-дизайна. Т.е. способность правильно выравнивать элементы и группы элементов была для многих из нас самой захватывающей особенностью Flexbox, когда он впервые появился в браузерах. Выравнивание стало просто двумя строками в CSS:

Свойства выравнивания, которые можно рассматривать как свойства выравнивания flexbox, теперь полностью определены в спецификации Box Alignment. Она подробно описывает как работает выравнивание в различных контекстах компоновки. Это означает, что мы можем использовать те же свойства выравнивания в CSS Grid, что и в Flexbox, а в будущем, и в других контекстах компоновки. Таким образом, любая новая возможность выравнивания для flexbox будет подробно описана в спецификации Box Alignment, а не на следующем уровне Flexbox.

Свойства

Многие люди говорят мне, что они изо всех сил пытаются вспомнить, следует ли использовать свойства, начинающиеся во flexbox с align-, или те, которые начинаются с justify-. Следует запомнить, что:

Мышление с точки зрения главной и поперечной оси, а не горизонтальной и вертикальной, действительно здесь помогает. Не имеет значения, куда физически направлена ось.

Выравнивание главной оси при помощи justify-content

Начнем с выравнивания главной оси. На главной оси выравнивание выполняется с помощью свойства justify-content. Это свойство обрабатывает все flex-элементы как группу и управляет распределением пространства между ними.

Начальное значение свойства justify-content это flex-start. Вот почему при объявлении display: flex все flex-элементы выстраиваются в линию в начале flex строки. Если ваше flex-направление имеет значение row(строка) и направление ввода текста языка слева направо, как английский, то элементы будут начинаться слева.

Рис_1. Элементы выстраиваются в линию от начала

Обратите внимание, что свойство justify-content может выполнять действия только при наличии свободного места для распространения. Поэтому, если ваш набор flex-элементов занимает все пространство на главной оси, использование justify-content ничего не изменит.

Рис_2. Нет пространства для перераспределения

Если мы дадим свойству justify-content значение flex-end, тогда все элементы переместятся в конец строки. Свободное место разместится теперь в начале.

Рис_3. Элементы выстраиваются в линию в конце

Рис_4. Свободное пространство распределяется между элементами

Рис_5. Теперь элементы имеют пространство по обе стороны от себя

Новейшее значение свойства justify-content можно найти в спецификации Box Alignment; оно не отображается в спецификации по Flexbox. Это space-evenly. В этом случае элементы будут распределены в контейнере равномерно, а дополнительное пространство будет между ними и с обеих сторон.

Рис_6. Элементы распределены равномерно

Вы можете играть со всеми значениями в демо:

Эти значения работают таким же образом, если ваше flex-направление является столбцом. Однако у вас может не быть дополнительного пространства для распределения в столбце, если вы не добавите высоту или размер блока во flex-контейнер, как в следующем демо.

Выравнивание перпендикулярной оси при помощи align-content

Если вы добавили flex-wrap: wrap во flex-контейнер и имеете несколько flex строк, то вы можете использовать свойство align-content для выравнивания flex строк на поперечной оси. Однако для этого потребуется дополнительное пространство на поперечной оси. В демо, расположенном ниже, моя поперечная ось проходит в блочном направлении, т.е. в столбце, и я уставил высоту контейнера в 60vh. Поскольку это больше, чем необходимо для отображения моих flex-элементов, у меня в контейнере есть вертикальное свободное пространство.

Затем я могу использовать align-content с любым из значений:

Если мое flex-direction — столбец, то align-content будет работать, как в следующем примере.

Как и в случае с justify-content, мы работаем со строками в группе и распределяем свободное пространство.

Короткая форма свойства place-content

В спецификации Box Alignment мы находим сокращенную форму свойства place-content. Использовав это свойство, вы можете установить justify-content и align-content сразу. Первый параметр указывается для align-content, второй — для justify-content. Если указали только одно значение, то оно задается для обоих параметров, следовательно:

Если вы использовали:

то это будет то же самое, что:

Выравнивание перпендикулярной оси при помощи align-items

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

Тем не менее, есть еще один способ, которым мы можем выровнять наши элементы, — это выравнивание элементов относительно друг друга на поперечной оси. Ваш контейнер имеет высоту. Эта высота могла бы быть определена высотой самого высокого элемента как на этом рисунке.

Рис_7. Высота контейнера определяется третьим элементом

Вместо этого он может быть определен путем добавления высоты во flex-контейнер:

Рис_8. Высота определяется размером flex-контейнера

Причина, по которой flex-элементы растягиваются до размера самого высокого элемента, заключается в том, что начальным значением параметра align-items является stretch. И элементы растягиваются по поперечной оси, чтобы получить размер flex-контейнера в этом направлении.

Обратите внимание, что в случае align-items имеет значение concerned, и при наличии многострочного flex-контейнера, каждая строка действует как новый flex-контейнер. Самый высокий элемент в этой строке будет определять размер всех элементов строки.

В дополнение к начальному значению stretch можно присвоить элементам align-items значение flex-start, в этом случае они выравниваются по началу контейнера и больше не растягиваются по высоте.

Рис_9. Элементы выровнены по началу поперечной оси

Значение flex-end перемещает их в конец контейнера по поперечной оси.

Рис_10. Элементы выровнены по концу поперечной оси

Если вы используете значение center элементы все центрируются друг против друга:

Рис_11. Элементы по центру поперечной оси

Мы также можем сделать выравнивание по базовой линии. Это гарантирует выравнивание базовых линий текста, а не выравнивание полей вокруг содержимого.

Рис_12. Выравнивание по базовой линии

Вы можете попробовать эти значения в демо:

Индивидуальное выравнивание с помощью align-self

Свойство align-items означает, что можно задать выравнивание всех элементов одновременно. На самом деле оно устанавливает значения свойства align-self отдельных flex-элементов для всей группы.

Также можно использовать свойство align-self любого отдельного flex-элемента для выравнивания его внутри flex-строки относительно других flex-элементов.

В следующем примере я использовал align-items в контейнере, чтобы задать выравнивание для группы по центру, но также использовал align-self для первого и последнего элементов, чтобы изменить их значение выравнивания.

Почему здесь нет самовыравнивания?

Часто возникает вопрос, почему невозможно выровнять один элемент или группу элементов по главной оси. Почему во Flexbox нет свойства -self для выравнивания по главной оси? Если вы думаете о justify-content и align-content как о распределении пространства, причина отсутствия самонастраивания становится более очевидной. Мы имеем дело с flex-элементами как с группой и распределяем доступное пространство определенным образом — либо в начале, либо в конце группы, либо между элементами.

Если может быть также полезно подумать о том, как обосновать-содержание и выравнивание-содержание работы в макете CSS сетки. В Grid эти свойства используются для распределения свободного пространства в контейнере grid между дорожками grid. Еще раз, мы берем треки как группу, и эти свойства дают нам возможность распределить любое дополнительное пространство между ними. Поскольку мы действуем в группе как в Grid, так и в Flexbox, мы не можем нацелиться на элемент самостоятельно и сделать с ним что-то другое. Тем не менее, есть способ достичь вида макета, который вы просите, когда вы просите self свойство на главной оси, и это использовать автоматические поля.

Использование автоотступов на основной оси

Если вы когда-либо центрировали блок в CSS (например, оболочку для содержимого главной страницы, установив margin слева и справа в auto), то у вас уже есть некоторый опыт работы с автоматическими полями. Отступ, установленный в auto, будет пытаться стать настолько большим, насколько это возможно в установленном направлении. В случае использования отступов для центрирования блока, мы устанавливаем оба, левый и правый, в auto. Каждый из них пытается занять как можно больше места, и поэтому выжимает наш блок в центр.

Я нацеливаюсь на этот пункт меню и даю ему margin-left auto. Это означает, что поле пытается получить как можно больше места слева от пункта, толкая его полностью вправо.

Если вы используете автоотступы на главной оси, то свойство justify-content перестанет создавать какой-либо эффект, так как автоотступы займут все пространство, которое иначе было бы распределено при помощи justify-content.

Резервное выравнивание

Каждый метод выравнивания подробно описывает резервное распределение, это то, что произойдет, если запрошенное выравнивание не может быть достигнуто. Например, если у вас есть только один элемент во flex-контейнере и вы запрашиваете justify-content: space-between, что должно произойти? Ответ заключается в том, что резервное выравнивание использует flex-start, и один элемент будет выровнен по началу flex-контейнера. В случае justify-content: space-around используется резервное выравнивание в центре.

В текущей спецификации вы не можете изменить настройки резервного выравнивания. Поэтому, если вы предпочитаете, чтобы резервный вариант для space-between был центром, а не flex-start, то пока нет способа сделать это. Но в спецификации есть примечание, в котором говорится, что эту возможность могут включить в будущих уровнях.

Безопасное и небезопасное выравнивание

Совсем недавним дополнением к спецификации Box Alignment стала концепция безопасного и небезопасного выравнивания с использованием безопасных и небезопасных ключевых слов.

В следующем коде последний элемент слишком широк для контейнера и при небезопасном выравнивании и гибком контейнере в левой части страницы элемент обрезается, поскольку переполнение выходит за границу страницы.

Рис_13. Небезопасное выравнивание обеспечит требуемое выравнивание, но может привести к потере данных

Безопасное выравнивание предотвратит потерю данных, переместив переполнение на другую сторону.

Рис_14. Безопасное выравнивание пытается предотвратить потерю данных

Эти ключевые слова прямо сейчас имеют ограниченную поддержку браузерами, тем не менее, они демонстрируют суть дополнительного контроля, вводимого во Flexbox через спецификацию Box Alignment.

Напоследок

Свойства выравнивания начинались как список во Flexbox, но теперь они имеют свою спецификацию и применяются также к другим контекстам компоновки. Несколько ключевых фактов помогут вам вспомнить, как их использовать во Flexbox:

Источник

Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал

Доброго времени суток, друзья!

Представляю вашему вниманию полное визуальное руководство-шпаргалку по всем свойствам CSS-модулей Flexbox и Grid.

В конце статьи вас ждет небольшой туториал по созданию тренажера по Flexbox.

Без дальнейших предисловий.

Flexbox (Flex, далее по тексту — Флекс)

Терминология

Флекс — это не отдельное свойство, но целый модуль, включающий набор свойств. Некоторые из этих свойств добавляются к контейнеру (родительскому элементу, известному как «флекс-контейнер» (flex container, далее по тексту — контейнер)), другие — к дочерним элементам (известным как «флекс-элементы» (flex items, далее по тексту — элементы)).

«Обычный» макет основан на потоке из блочных и строчных элементов, а флекс-макет — на «флекс-потоке» (flex-flow directions). Посмотрите на это изображение из спецификации, демонстрирующее ключевые идеи, лежащие в основе флекс-макета.

Элементы располагаются вдоль основной (главной) оси (main axis) (от main-start до main-end) или вдоль поперечной оси (cross axis) (от cross-start до cross-end).

Свойства флекс-контейнера

display

Данное свойство определяет флекс-контейнер; блочный или строчный в зависимости от присвоенного значения. Оно включает «флекс-контекст» для всех прямых потомков контейнера.

Обратите внимание, что свойства CSS-колонок в контейнере не работают.

flex-direction (направление)

Данное свойство определяет основную ось, направление, по которому размещаются элементы в контейнере. Флекс сам по себе (без расширяющих его функционал оберток) реализует концепцию однонаправленного макета. Поэтому элементы размещаются либо в горизональных строках, либо в вертикальных колонках.

flex-wrap (перенос, переход, разделение)

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

flex-flow (поток)

Данное свойство является сокращением для flex-direction и flex-wrap, которые определяют основную и поперечную оси контейнера. Значением по умолчанию является row nowrap.

justify-content (выравнивание контента в одной строке)

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

Что касается дополнительных ключевых слов «safe» и «unsafe», то использование safe позволяет избежать отрисовки элементов за пределами страницы, независимо от позиционирования, что, в свою очередь, исключает возможность появления прокрутки.

align-items (выравнивание элементов)

Данное свойство определяет, как элементы располагаются вдоль поперечной оси. Его можно сравнить с justify-content применительно к поперечной оси (перпендикулярной основной).

align-content (выравнивание содержимого в нескольких строках)

Данное свойство определяет выравнивание строк контейнера при наличии свободного пространство вдоль поперечной оси. Оно похоже на justify-content, которое распределяет пространство между отдельными элементами вдоль основной оси.

Обратите внимание, что рассматриваемое свойство применяется только в отношении содержимого контейнера, располагающегося на нескольких строках, когда свойство «flex-wrap» установлено в значение «wrap» или «wrap-reverse». В отношении однострочного контейнера (когда свойство «flex-wrap» имеет стандартное значение «no-wrap») применение align-content не будет иметь никакого эффекта.

Свойства флекс-элементов

order (порядок)

По умолчанию, элементы располагаются в контейнере в том порядке, в котором указаны в разметке. Данное свойство позволяет этим управлять.

flex-grow (рост, расширение)

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

Если все элементы имеют свойство «flex-grow» со значением 1, доступное пространство будет между ними распределяться равномерно. Если значением flex-grow одного из элементов является 2, данный элемент будет занимать двойную порцию пространства по сравнению с остальными элементами (или, по крайней мере, попытается это сделать).

Отрицательные значения невалидны.

flex-shrink (сжатие, сокращение)

Данное свойство определяет способность элемента к сжатию при необходимости.

Отрицательные значения невалидны.

flex-basis

Данное свойство определяет стандартный размер элемента перед распределением оставшегося пространства. Этим размером может быть длина (например, 20%, 5rem и т.д.) или ключевое слово. Ключевое слово «auto» означает использование значения свойства «width» или «height» элемента (раньше вместо auto использовалось main-size). Ключевое слово «content» означает учет содержимого элемента. Указанное ключевое слово пока плохо поддерживается, поэтому сложно определить разницу между min-content, max-content и fit-content.

Если значением этого свойства является 0, окружающее элемента пространство не принимается в расчет. Если значением является «auto», доступное пространство распределяется согласно значению свойства «flex-grow».

Данное свойство является сокращением для flex-grow, flex-shrink и flex-basis. Второй и третий параметры (flex-shrink и flex-basis) являются опциональными. Значением по умолчанию является 0 1 auto, при этом auto можно опустить.

Рекомендуется использовать данное сокращение вместо определения каждого свойства, это позволяет автоматически определять значения свойств в правильном порядке.

align-self(выравнивание отдельного элемента)

Данное свойство позволяет перезаписывать дефолтное или установленное с помощью align-self выравнивание отдельного элемента.

См. объяснение align-items для доступных значений.

Обратите внимание, что float, clear и vertical-align применительно к флекс-элементу не имеют никакого эффекта.

Примеры

Начнем с очень простого примера — решения проблемы выравнивания элемента по центру.

Это работает благодарю тому, что свойство «margin» со значением «auto» поглащает все доступное пространство флекс-контейнера. Поэтому установка значения вертикальных внешних отступов в auto приводит к идеальному центрированию элемента по обеим осям.

Теперь попробуем использовать больше свойств. У нас имеется 6 элементов фиксированного размера, способных перестраиваться в зависимости от ширины экрана без участия медиа-запросов. Мы хотим, чтобы доступное пространство основной оси распределялось между элементами равномерно.

Готово. Осталось немного стилизовать:

Попробуем что-нибудь еще. Предположим, что в шапке сайта у нас имеется навигационное меню, выровненное по правому краю, и мы хотим, чтобы оно распологалось по центру на средних экранах и выстраивалось в одну колонку на маленьких экранах. Проще простого.

Поэкпериментируем с гибкостью элементов. Как насчет создания mobile-first трехколоночного макета с полноразмерной шапкой и подвалом, который не зависит от порядка расположения элементов в разметке.

Полезные ресурсы

Поддержка

Grid (далее по тексту — Грид или Сетка)

CSS Grid Layout на сегодняшний день является самым мощным средством создания макетов страниц. Он представляет собой двунаправленную систему. Это означает, что он может работать как со строками, так и с колонками, в отличие от Флекс, который умеет работать только со строками. Грид включает в себя свойства родительского элемента (Grid Container, грид-контейнер, далее по тексту — контейнер) и свойства дочерних элементов (Grid Elements, грид-элементы, далее по тексту — элементы).

Терминология

Грид-контейнер (Grid Container, далее по тексту — контейнер)

Элемент, которому присвоено свойство «display» со значением «grid», становится грид-контейнером. Данный контейнер является прямым предком всех грид-элементов. В следующем примере элемент «div» с классом «container» является грид-контейнером.

Грид-линия (Grid Line, далее по тексту — линия)

Разделительная линия, формирующая структуру Сетки. Она может быть вертикальной или горизонтальной и обозначает границу строки или колонки. Желтая линия на изображении ниже — это пример вертикальной грид-линии (грид-линии колонки).

Грид-трек (Grid Track, далее по тексту — трек или дорожка)

Пространство между двумя смежными линиями. Вы можете думать о треках как о строках или колонках Грида. Вот пример дорожки между второй и третьей линиями.

Грид-область (Grid Area, далее по тексту — область)

Общее пространство между четырьмя линиями. Область может занимать любое количество грид-ячеек. Вот пример области между горизонтальными линиями 1 и 3 и вертикальными линиями 1 и 3.

Грид-элемент (Grid Element, далее по тексту — элемент)

Дочерний элемент (прямой потомок) контейнера. В следующем примере элементы с классом «item» являются грид-элементами, а элемент с классом «sub-item» — нет.

Грид-ячейка (Grid Cell, далее по тексту — ячейка)

Пространство между двумя смежными горизонтальными и вертикальными линиями. Это элементарная единица Сетки. Вот пример ячейки между горизонтальными линиями 1 и 2 и вертикальными линиями 2 и 3.

Пример

Колонки с гибкой шириной, которые автоматически перестраиваются в зависимости от ширины экрана без медиа-запросов.

Свойства грид-контейнера

display

Данное свойство делает элемент грид-контейнером и устанавливает грид-контекст для его содержимого.

grid-template-columns, grid-template-rows

Данные свойства определяют колонки и строки Сетки с разделенными пробелами значениями. Значения представляют собой размер трека, а пробелы — линию.

Вы можете явно указывать названия линий. Обратите внимание на квадратные скобки:

Линии могут иметь несколько названий. Здесь, например, вторая линия имеет два названия:

Если определение содержит повторяющиеся фрагменты, можно использовать инструкцию «repeat» для сокращения:

Что эквивалентно следующему:

Если несколько линий имеют одинаковые имена, можно использовать название линии и количество таких линий.

Единица «fr» позволяет установить размер трека как фракцию свободного пространства контейнера. В примере ниже ширина каждого элемента равняется трети ширины контейнера:

Свободное пространство вычисляется после вычитания элементов фиксированного размера. В следующем примере пространство, доступное для распределения с помощью единицы «fr» не включает 50px:

grid-template-areas

Данное свойство определяет шаблон Сетки с помощью названий областей, определенных в свойствах «grid-area». Повторение названий областей заставляет контент расширяться на указанное количество ячеек. Точка означает пустую ячейку. Такой синтаксис позволяет визуализировать структуру Сетки.

Этот код создает Сетку шириной в четыре колонки и высотой в три строки. Первая (верхняя) строка полностью занимается шапкой. Средняя строка состоит из двух областей «main», одной пустой ячейки и одной области «sidebar». Последняя строка — подвал.

Каждая строка в определении должна состоять из одинакового количества колонок.

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

Обратите внимание, что данный синтаксис применяется для обозначения областей, а не линий. При использовании этого синтаксиса линия каждой стороны области именуется автоматически. Если названием области является «foo», то названием начальных (первых) линий (строчной и колоночной) области будет «foo-start», а последних — «foo-end». Это означает, что некоторые линии могут иметь несколько названий, как в рассмотренном примере, где верхняя левая линия имеет три названия: header-start, main-start и footer-start.

grid-template

Данное свойство является сокращением для grid-template-rows, grid-template-columns и grid-template-areas.

Это эквивалентно следующему:

Поскольку grid-template не сбрасывает неявные свойства Сетки (такие как grid-auto-columns, grid-auto-rows и grid-auto-flow), что требуется в большинстве случаев, вместо него рекомендуется использовать свойство «grid».

column-gap, row-gap, grid-column-gap, grid-row-gap

Данные свойства определяют размеры линий. Другими словами, они определяют величину отступов между колонками/строками.

Отступы создаются только между колонками/строками, но не по краям Сетки.

Обратите внимание, что свойства «grid-column-gap» и «grid-row-gap» в настоящее время переименованы в «column-gap» и «row-gap».

gap, grid-gap

Данное свойство является сокращением для row-gap и column-gap.

Если значение свойства «row-gap» не установлено, оно принимает значение свойства «column-gap».

Обратите внимание, что свойство «grid-gap» в настоящее время переименовано в «gap».

justify-items

Данное свойство определяет выравнивание элементов в ячейках вдоль строчной (горизонтально) оси (в противоположность своству «align-items», определяющему выравнивание вдоль блочной (колоночной, вертикальной) оси). Значение этого свойства применяется ко всем элементам контейнера.

Расположение отдельного элемента вдоль строчной оси ячейки контролируется свойством «justify-self».

align-items

Данное свойство определяет выравнивание элементов в ячейках вдоль блочной (колоночной, вертикальной) оси (в противоположность свойству «justify-items», которое определяет выравнивание вдоль строчной (горизонтальной) оси). Значение этого свойства применяется ко всем элементам контейнера.

Расположение отдельного элемента вдоль колоночной оси ячейки контролируется свойством «align-self».

place-items

Данное свойство является сокращением для align-items и justify-items.

Элементы располагаются по центру ячеек вдоль колоночной оси и в начале вдоль строчной оси.

justify-content (выравнивание колонок)

Порой общая ширина элементов Сетки (ее колонок) оказывается меньше ширины контейнера. Это может произойти при определении элементов фиксированного размера (с помощью px, например). В этом случае мы можем определить порядок расположения колонок Сетки в контейнере. Данное свойство определяет выравнивание Сетки вдоль строчной оси — выравнивание колонок (в противоположность свойству «align-content», которое определяет выравнивание Сетки вдоль блочной (колоночной) оси — выравнивание строк).

align-content (выравнивание строк)

Порой общая высота элементов Сетки (ее строк) оказывается меньше высоты контейнера. Это может произойти при определении элементов фиксированного размера (с помощью px, например). В этом случае мы можем определить порядок расположения строк Сетки в контейнере. Данное свойство определяет выравнивание Сетки вдоль блочной (колоночной) оси — выравнивание строк (в противоположность свойству «justify-content», которое определяет выравнивание Сетки вдоль строчной оси — выравнивание колонок).

place-content

Данное свойство является сокращением для align-content и justify-content.

Строки располагаются по центру контейнера, колонки — в начале.

grid-auto-columns, grid-auto-rows (размер неявных треков)

Данные свойства определяют размер автоматически создаваемых дорожек (неявных треков). Неявные треки создаются при наличии большего количества элементов, чем ячеек Сетки, или при размещении элемента за пределами Сетки.

Это создает Сетку размером 2х2.

Допустим, мы используем свойства «grid-column» и «grid-row» для позиционирования элементов следующим образом:

Началом элемента с классом «item-b» является вертикальная линия 5, а концом — вертикальная линия 6, но мы не определили эти линии. Поскольку мы ссылаемся на несуществующие линии, для заполнения отступов создаются неявные треки с нулевой шириной. Мы можем использовать свойство «grid-auto-columns» для определения ширины неявных дорожек:

grid-auto-flow

Для позиционирования элементов, находящихся за пределами Сетки, можно использовать алгоритм автоматического размещения (auto-placement algorithm). Рассматриваемое свойство определяет, как должен работать данный алгоритм.

Предположим, что у нас имеется такая разметка:

Мы определяем Сетку, состоящую из пяти колонок и двух строк, и устанавливаем свойству «grid-auto-flow» значение «row» (которое является значением по умолчанию):

При размещении элементов в Сетке, мы определяем места только двух элементов:

Поскольку значением свойства «grid-auto-flow» является «row», наша Сетка выглядит так, как показано на изображении ниже. Обратите внимание на расположение элементов с классами «item-b», «item-c» и «item-d» (предпочтение отдается строкам):

Если поменять значение свойства «grid-auto-flow» на «column», Сетка будет выглядеть следующим образом (предпочтение отдается колонкам):

Данное свойство является сокращением для grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow (обратите внимание, что в одном объявлении могут содержаться только «явные» или «неявные» свойства).

Следующие два блока кода эквиваленты:

Следующие два блока кода эквиваленты:

И следующие два блока кода также эквиваленты:

В данном случае мы можем использовать более сложный, но в тоже время более удобный синтаксис для одновременного определения свойств «grid-template-areas», «grid-template-rows» и «grid-template-columns» и установки прочих свойств в дефолтные значения. Что для этого нужно сделать, так это определить названия линий и размеры треков с соответствующими областями на одной строке. Это проще продемонстрировать на примере:

Это равнозначно следующему:

Свойства грид-элементов

Обратите внимание, что свойства float, display: inline-block, display: table-cell, vertical-align и column-*, применяемые к грид-элементу, не имеют никакого эффекта.

grid-column-start, grid-column-end, grid-row-start, grid-row-end

Данные свойства определяют положение элемента в Сетке через привязку к определенным линиям. grid-column-start / grid-row-start — это начальные линии элемента, а grid-column-end / grid-row-end — конечные.

Если значения свойств grid-column-end / grid-row-end не определены, элемент займет 1 трек по умолчанию.

Элементы могут перекрывать друг друга. Вы можете использовать свойство z-index для управления порядком наложения элементов.

grid-column, grid-row

Данные свойства являются сокращением для grid-column-start + grid-column-end и grid-row-start + grid-row-end, соответственно.

Если конечная линия не определена, элемент по умолчанию будет занимать 1 трек.

grid-area

Данное свойство определяет название элемента, которое используется в качестве значения в свойстве grid-template-areas. grid-area также может использоваться как сокращение для grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Сокращение для grid-row-start + grid-column-start + grid-row-end + grid-column-end:

justify-self

Данное свойство определяет выравнивание элемента в ячейке вдоль строчной оси (в противоположность свойству align-self, которое определяет выравнивание вдоль блочной (колоночной) оси). Это свойство применяется к элементу внутри отдельной ячейки.

Для управления выравниванием всех элементов Сетки вдоль строчной оси используется свойство justify-items.

align-self

Данное свойство определяет выравнивание элемента в ячейке вдоль блочной (колоночной) оси (в противоположность свойству justify-self, которое определяет выравнивание вдоль строчной оси). Это свойство применяется к элементу внутри отдельной ячейки.

Для управления выравниванием всех элементов Сетки вдоль блочной (колоночной) оси используется свойство align-items.

place-self

Данное свойство является сокращением для align-self и justify-self.

Специальные функции и ключевые слова

Полезные ресурсы

Поддержка

Туториал

В данном туториале мы создадим простой тренажер по основным свойствам Flexbox.

Разметка

Здесь у нас имеется флекс-контейнер (flexContainer) с шестью флекс-элементами (flex-item) и контейнер (controls) для управления переключением свойств флекс-контейнера (flexContainerProps) и выбранного (selected) флекс-элемента (flexItemProps). Также во втором контейнере у есть две кнопки (buttons): одна для добавление элемента во флекс-контейнер (addBtn), другая для удаления последнего флекс-элемента (removeBtn).

Стили

Флекс-элементы должны быть разного размера и при этом гибкими. Мы добиваемся этого с помощью min-width/min-height и nth-child. Выбранный элемент имеет класс «selected» с другим цветом фона.

Скрипт

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

Рекомендую попробовать создать аналогичный тренажер по основным свойствам Grid — это будет отличной практикой и позволит как следует во всем разобраться.

Вам также может показаться интересным один из моих последних проектов — Современный стартовый HTML-шаблон.

Источник