Выраўноўванне флекс элементаў па галоўнай восі ў CSS
Уласцівасць justify-content дазваляе
выраўноўваць элементы па галоўнай восі. Раней
вы ўжо праходзілі значэнні center,
space-between, space-around,
space-evenly. Давайце цяпер вывучым
яшчэ некалькі значэнняў.
Значэнне flex-start прыціскае элементы да пачатку
галоўнай восі, а значэнне flex-end - да канца.
Давайце паглядзім на прыкладах.
Прыклад
Направім галоўную вось злева направа, задаўшы
ўласцівасці flex-direction значэнне row.
Прыціснем блокі да пачатку восі. Для гэтага justify-content
ўсталюем у значэнне flex-start:
.parent {
display: flex;
flex-direction: row; /* галоўная вось злева направа */
justify-content: flex-start; /* блокі да пачатку галоўнай восі */
}
Вынік выканання кода:
Прыклад
Давайце цяпер прыціснем блокі да канца восі.
Для гэтага justify-content ўсталюем
у значэнне flex-end:
.parent {
display: flex;
flex-direction: row; /* галоўная вось злева направа */
justify-content: flex-end; /* блокі да канца галоўнай восі */
}
Вынік выканання кода:
Прыклад
Направім цяпер галоўную вось справа налева,
задаўшы ўласцівасці flex-direction значэнне
row-reverse. Прыціснем блокі да пачатку
восі, гэта значыць да правага краю. Для гэтага justify-content
ўсталюем у значэнне flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* галоўная вось справа налева */
justify-content: flex-start; /* блокі да пачатку галоўнай восі */
}
Вынік выканання кода:
Прыклад
А цяпер давайце прыціснем блокі да канца галоўнай
восі, гэта значыць да левага краю. Для гэтага justify-content
ўсталюем у значэнне flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* галоўная вось справа налева */
justify-content: flex-end; /* блокі да канца галоўнай восі */
</+css+>
Вынік выканання кода:
Прыклад
У папярэдніх прыкладах галоўная вось была накіравана гарызантальна. Давайце цяпер перавернем яе і направім вертыкальна.
Давайце направім галоўную вось уніз, задаўшы
ўласцівасці flex-direction значэнне
column.
Прыціснем блокі да пачатку галоўнай восі, гэта значыць
да верхняга краю. Для гэтага justify-content
ўсталюем у значэнне flex-start:
.parent {
display: flex;
flex-direction: column; /* галоўная вось зверху ўніз */
justify-content: flex-start; /* блокі да пачатку галоўнай восі */
}
Вынік выканання кода:
Прыклад
Давайце цяпер прыціснем блокі да канца галоўнай
восі, гэта значыць да ніжняга краю. Для гэтага justify-content
ўсталюем у значэнне flex-end:
.parent {
display: flex;
flex-direction: column; /* галоўная вось зверху ўніз */
justify-content: flex-end; /* блокі да канца галоўнай восі */
}
Вынік выканання кода:
Прыклад
Перавернем галоўную вось, направiўшы яе знізу
ўверх. Для гэтага ўласцівасці flex-direction
зададзім значэнне column-reverse. У
гэтым выпадку блокі зменяць свой парадак -
у пачатку восі будзе стаяць апошні ў HTML
кодзе блок.
Давайце прыціснем блокі да пачатку галоўнай восі,
гэта значыць да ніжняга краю. Для гэтага justify-content
ўсталюем у значэнне flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* галоўная вось знізу ўверх */
justify-content: flex-start; /* блокі да пачатку галоўнай восі */
}
Вынік выканання кода:
Прыклад
Давайце прыціснем блокі да канца галоўнай восі,
гэта значыць да верхняга краю. Для гэтага justify-content
ўсталюем у значэнне flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* галоўная вось знізу ўверх */
justify-content: flex-end; /* блокі да канца галоўнай восі */
}
Вынік выканання кода:
