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