Justify content css примеры

justify-content

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

Краткая информация

Синтаксис

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы выравниваются по центру строки. space-between
Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. space-evenly Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.

Песочница

Пример

Объектная модель

Объект.style.justifyContent

Примечание

Safari до версии 9 поддерживает свойство -webkit-justify-content .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

Источник

justify-content¶

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

Демо¶

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

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

/* Позиционное выравнивание */ justify-content: center; /* Выравнивание элементов по центру */ justify-content: start; /* Выравнивание элементов в начале */ justify-content: end; /* Выравнивание элементов в конце */ justify-content: flex-start; /* Выравнивание элементов с самого начала */ justify-content: flex-end; /* Выравнивание элементов с самого конца */ justify-content: left; /* Выравнивание элементов по левому краю */ justify-content: right; /* Выравнивание элементов по правому краю */ /* Выравнивание относительно осевой линии */ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; /* Распределенное выравнивание */ /* Равномерно распределяет все элементы по ширине flex-блока. Первый элемент вначале, последний в конце */ justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют полуразмерное пространство с обоих концов */ justify-content: space-around; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют равное пространство вокруг */ justify-content: space-evenly; /* Равномерно распределяет все элементы по ширине flex-блока. Все элементы имеют "авто-размер", чтобы соответствовать контейнеру */ justify-content: stretch; /* Выравнивание при переполнении */ justify-content: safe center; justify-content: unsafe center; /* Глобальные значения */ justify-content: inherit; justify-content: initial; justify-content: unset; 

Значения¶

Значение по-умолчанию: normal

Применяется к flex-контейнерам

start Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси. end Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси. flex-start Флексы прижаты к началу строки. flex-end Флексы прижаты к концу строки. center Флексы прижимаются по центру строки. left Элементы упакованы вплотную друг к другу к левому краю контейнера выравнивания. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start . right Элементы упакованы вплотную друг с другом по направлению к правому краю контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна встроенной оси, это значение ведет себя как start .

baseline , first baseline , last baseline Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии. Обратно-совместимое выравнивание для first baseline — start , а для last baseline — end .

space-between Флексы равномерно распределяются по всей строке. Первый и последний флекс прижимаются к соответствующим краям контейнера. space-around Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.

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

stretch Если объединенный размер элементов меньше, чем размер контейнера выравнивания, размер любого элемента авторазмера увеличивается одинаково (не пропорционально), при этом соблюдая ограничения, накладываемые max-height / max-width (или эквивалентными функциями), так что объединенный размер точно заполняет контейнер выравнивания вдоль главной оси.

safe Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания был start .

unsafe Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.

Примечание¶

Спецификации¶

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

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

 html> head> meta charset="utf-8" /> title>justify-contenttitle> style> section  display: flex; margin-bottom: 10px; > section > div  border: 1px solid #ccc; width: 100px; height: 100px; background: repeating-radial-gradient( circle at 50% 50%, #fff, #fff 25px, #f96 25px, #f96 50px ); > .flex-start  justify-content: flex-start; > .flex-end  justify-content: flex-end; > .center  justify-content: center; > .space-between  justify-content: space-between; > .space-around  justify-content: space-around; > style> head> body> section class="flex-start"> div>div> div>div> div>div> section> section class="flex-end"> div>div> div>div> div>div> section> section class="center"> div>div> div>div> div>div> section> section class="space-between"> div>div> div>div> div>div> section> section class="space-around"> div>div> div>div> div>div> section> body> html> 

Источник