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