Що робить align-items?

CSSJunior~1 хв читання

align-items вирівнює flex-елементи вздовж поперечної осі (перпендикулярно до flex-direction) усередині одного рядка flex-контейнера.

Основні значення:

javascript

align-items: stretch;     /* типово: розтягнути елементи по висоті рядка */
align-items: flex-start;  /* притиснути до початку поперечної осі */
align-items: flex-end;    /* притиснути до кінця поперечної осі */
align-items: center;      /* вирівняти по центру поперечної осі */
align-items: baseline;    /* вирівняти по лінії тексту (baseline) */

Якщо flex-direction: row, поперечна вісь - вертикальна → align-items керує вирівнюванням по вертикалі. Якщо flex-direction: column, поперечна вісь - горизонтальна → align-items керує вирівнюванням по горизонталі.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.