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

Резултат извршавања кода:

Практични задаци

Поновите страницу по овом узору: