justify-content

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

justify-content հատկությունը որոշում է, թե ինչպես է բրաուզերը տարածություն բաշխում բովանդակության տարրերի միջև և շուրջը flex-կոնտեյների հիմնական առանցքի կամ grid-կոնտեյների շարքի առանցքի երկայնքով: Սա արվում է այն բանից հետո, երբ սահմանված են չափերը և ավտոմատ հեռավորությունները, բացառությամբ այն դեպքերից, երբ առնվազն մեկ տարրին սահմանված է flex-grow-ի ճ-ից ավել արժեք: Այս հատկությունը տեղաշարժի համար ազատ տարածություն չի թողնում:

Синтаксис

Գրելաձև

justify-content: flex-start; ⟿ Элементы располагаются в начале контейнера(слева).
justify-content: flex-end; ⟿ Элементы располагаются в конце контейнера(справа).
justify-content: center; ⟿ Элементы располагаются в центре контейнера.
justify-content: space-between; ⟿ Элементы будут иметь большое пространство между ними.
justify-content: space-around; ⟿ Элементы будут иметь среднее пространство между ними.
justify-content: space-evenly; ⟿ Элементы будут иметь маленькое пространство между ними. justify-content: flex-start; ⟿ Տարրերը տեղադրվում են տարայի սկզբում (ձախ).
justify-content: flex-end; ⟿ Տարրերը տեղադրվում են տարայի վերջում (աջից).
justify-content: center; ⟿ Տարրերը տեղադրվում են տարայի կենտրոնում.
justify-content: space-between; ⟿ Տարրերը շատ տարածություն կունենան միմյանց միջև.
justify-content: space-around; ⟿ Տարրերը կունենան միջին տարածություն միմյանց միջև.
justify-content: space-evenly; ⟿ Տարրերը քիչ տարածություն կունենան միմյանց միջև.

Пример

Օրինակ

See the Pen Untitled by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

Поддержка браузера дляԲրաուզերի աջակցությունը justify-content элемента տարրին
Browser	IE	Edge	Chrome	Firefox	Safari	Opera
Version	10+	12+	29+	28+	9+	17+
Notes	-ms-