Свойство 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; ⟿ Տարրերը քիչ տարածություն կունենան միմյանց միջև.
Пример
Օրինակ
⇓Результат данного примера показан на рисунке⇓
⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓
| Browser | IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| Version | 10+ | 12+ | 29+ | 28+ | 9+ | 17+ |
| Notes | -ms- |