Выраўноўванне флекс элементаў па галоўнай восі ў CSS

Уласцівасць justify-content дазваляе выраўноўваць элементы па галоўнай восі. Раней вы ўжо праходзілі значэнні center, space-between, space-around, space-evenly. Давайце цяпер вывучым яшчэ некалькі значэнняў.

Значэнне flex-start прыціскае элементы да пачатку галоўнай восі, а значэнне flex-end - да канца. Давайце паглядзім на прыкладах.

Прыклад

Направім галоўную вось злева направа, задаўшы ўласцівасці flex-direction значэнне row. Прыціснем блокі да пачатку восі. Для гэтага justify-content ўсталюем у значэнне flex-start:

css.parent {
  display: flex;
  flex-direction: row; /* галоўная вось злева направа */
  justify-content: flex-start; /* блокі да пачатку галоўнай восі */
}

Вынік выканання кода:

Прыклад

Давайце цяпер прыціснем блокі да канца восі. Для гэтага justify-content ўсталюем у значэнне flex-end:

css.parent {
  display: flex;
  flex-direction: row; /* галоўная вось злева направа */
  justify-content: flex-end; /* блокі да канца галоўнай восі */
}

Вынік выканання кода:

Прыклад

Направім цяпер галоўную вось справа налева, задаўшы ўласцівасці flex-direction значэнне row-reverse. Прыціснем блокі да пачатку восі, гэта значыць да правага краю. Для гэтага justify-content ўсталюем у значэнне flex-start:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* галоўная вось справа налева */
  justify-content: flex-start; /* блокі да пачатку галоўнай восі */
}

Вынік выканання кода:

Прыклад

А цяпер давайце прыціснем блокі да канца галоўнай восі, гэта значыць да левага краю. Для гэтага justify-content ўсталюем у значэнне flex-end:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* галоўная вось справа налева */
  justify-content: flex-end; /* блокі да канца галоўнай восі */
</+css+>

Вынік выканання кода:

Прыклад

У папярэдніх прыкладах галоўная вось была накіравана гарызантальна. Давайце цяпер перавернем яе і направім вертыкальна.

Давайце направім галоўную вось уніз, задаўшы ўласцівасці flex-direction значэнне column.

Прыціснем блокі да пачатку галоўнай восі, гэта значыць да верхняга краю. Для гэтага justify-content ўсталюем у значэнне flex-start:

css.parent {
  display: flex;
  flex-direction: column; /* галоўная вось зверху ўніз */
  justify-content: flex-start; /* блокі да пачатку галоўнай восі */
}

Вынік выканання кода:

Прыклад

Давайце цяпер прыціснем блокі да канца галоўнай восі, гэта значыць да ніжняга краю. Для гэтага justify-content ўсталюем у значэнне flex-end:

css.parent {
  display: flex;
  flex-direction: column; /* галоўная вось зверху ўніз */
  justify-content: flex-end; /* блокі да канца галоўнай восі */
}

Вынік выканання кода:

Прыклад

Перавернем галоўную вось, направiўшы яе знізу ўверх. Для гэтага ўласцівасці flex-direction зададзім значэнне column-reverse. У гэтым выпадку блокі зменяць свой парадак - у пачатку восі будзе стаяць апошні ў HTML кодзе блок.

Давайце прыціснем блокі да пачатку галоўнай восі, гэта значыць да ніжняга краю. Для гэтага justify-content ўсталюем у значэнне flex-start:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* галоўная вось знізу ўверх */
  justify-content: flex-start; /* блокі да пачатку галоўнай восі */
}

Вынік выканання кода:

Прыклад

Давайце прыціснем блокі да канца галоўнай восі, гэта значыць да верхняга краю. Для гэтага justify-content ўсталюем у значэнне flex-end:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* галоўная вось знізу ўверх */
  justify-content: flex-end; /* блокі да канца галоўнай восі */
}

Вынік выканання кода: