Выраўноўванне флекс блокаў па папярочнай восі ў CSS
Давайце цяпер будзем выраўноўваць блокі і
па папярочнай восі. Выраўноўванне па гэтай восі
задаецца ўласцівасцю align-items. Значэнне
flex-start прыціскае элементы да пачатку
восі, а значэнне flex-end - да канца.
Давайце паспрабуем на прыкладах.
Прыклад
Направім галоўную вось злева направа. У гэтым выпадку папярочная вось будзе накіравана зверху ўніз. Давайце парэгулюем размяшчэнне нашых блокаў і па галоўнай восі, і па папярочнай восі.
Па галоўнай восі прыціснем блокі да яе пачатку,
гэта значыць да левага краю. Для гэтага justify-content
ўсталюем у значэнне flex-start. Па
папярочнай восі таксама прыціснем блокі да яе пачатку,
гэта значыць да верхняга краю. Для гэтага align-items
таксама ўсталюем у значэнне flex-start.
Паглядзім, што ў нас атрымліваецца:
.parent {
display: flex;
flex-direction: row; /* галоўная вось направа, папярочная ўніз */
justify-content: flex-start; /* блокі да пачатку галоўнай восі */
align-items: flex-start; /* блокі да пачатку папярочнай восі */
}
Вынік выканання кода:
Прыклад
Давайце цяпер прыціснем блокі да канца папярочнай
восі, гэта значыць да нізу. Для гэтага align-items
ўсталюем у значэнне flex-end:
.parent {
display: flex;
flex-direction: row; /* галоўная вось направа, папярочная ўніз */
justify-content: flex-start; /* блокі да пачатку галоўнай восі */
align-items: flex-end; /* блокі да канца папярочнай восі */
}
Вынік выканання кода:
Прыклад
Направім цяпер галоўную вось зверху ўніз. Паколькі галоўная вось вертыкальная, то папярочная будзе накіравана справа налева. Давайце прыціснем блокі па абодвух восях да іх пачатку:
.parent {
display: flex;
flex-direction: column; /* галоўная вось ўніз, папярочная направа */
justify-content: flex-start; /* блокі да пачатку галоўнай восі */
align-items: flex-start; /* блокі да пачатку папярочнай восі */
}
Вынік выканання кода:
Прыклад
А цяпер па папярочнай восі прыціснем блокі да яе канца:
.parent {
display: flex;
flex-direction: column; /* галоўная вось ўніз, папярочная направа */
justify-content: flex-start; /* блокі да пачатку галоўнай восі */
align-items: flex-end; /* блокі да канца папярочнай восі */
}
Вынік выканання кода:
Прыклад
Прыціснем блокі да канца абодвух восей:
.parent {
display: flex;
flex-direction: column; /* галоўная вось ўніз, папярочная направа */
justify-content: flex-end; /* блокі да канца галоўнай восі */
align-items: flex-end; /* блокі да канца папярочнай восі */
}
Вынік выканання кода:
Прыклад
Давайце памяняем кірунак галоўнай восі - напраўм яе знізу ўверх. Пры гэтым папярочная вось не зменіць свайго кірунку, паколькі галоўная вось па-ранейшаму вертыкальная.
Прыціснем блокі да пачатку абодвух восей:
.parent {
display: flex;
flex-direction: column-reverse; /* галоўная вось уверх, папярочная направа */
justify-content: flex-start; /* блокі да пачатку галоўнай восі */
align-items: flex-start; /* блокі да пачатку папярочнай восі */
}
Вынік выканання кода:
