Подесување на флекс елементи по главната оска во 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; /* блокови кон крајот на главната оска */
}
Резултат од извршувањето на кодот:
Пример
Во претходните примери главната оска беше насочена хоризонтално. Ајде сега да ја превртиме и да ја насочиме вертикално.
Ајде да ја насочиме главната оска надолу, задавајќи
му на својството 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; /* блокови кон крајот на главната оска */
}
Резултат од извршувањето на кодот:
Пример
Да ја превртиме главната оска, насочувајќи ја од долу
нагоре. За ова на својството 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; /* блокови кон крајот на главната оска */
}
Резултат од извршувањето на кодот:
