Подредување на флекс блокови по попречната оска во 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; /* блокови кон почетокот на попречната оска */
}
Резултат од извршувањето на кодот:
