Выраўноўванне флекс блокаў па папярочнай восі ў CSS

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

Давайце паспрабуем на прыкладах.

Прыклад

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

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

Паглядзім, што ў нас атрымліваецца:

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

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

Прыклад

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

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

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

Прыклад

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

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

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

Прыклад

А цяпер па папярочнай восі прыціснем блокі да яе канца:

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

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

Прыклад

Прыціснем блокі да канца абодвух восей:

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

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

Прыклад

Давайце памяняем кірунак галоўнай восі - напраўм яе знізу ўверх. Пры гэтым папярочная вось не зменіць свайго кірунку, паколькі галоўная вось па-ранейшаму вертыкальная.

Прыціснем блокі да пачатку абодвух восей:

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

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