Подравняване на флекс блокове по напречната ос в CSS

Нека сега подравним блоковете и по напречната ос. Подравняването по тази ос се задава със свойството align-items. Стойността flex-start притиска елементите към началото на оста, а стойността flex-end - към края.

Нека опитаме с примери.

Пример

Нека насочим главната ос отляво надясно. В този случай напречната ос ще бъде насочена отгоре надолу. Нека регулираме разположението на нашите блокове и по главната ос, и по напречната ос.

По главната ос ще притиснем блоковете към нейното начало, тоест към левия ръб. За това justify-content ще установим в стойност flex-start. По напречната ос също ще притиснем блоковете към нейното начало, тоест към горния ръб. За това align-items също ще установим в стойност flex-start.

Нека видим какво получаваме:

css.parent {
  display: flex;
  flex-direction:  row;        /* главна ос надясно, напречна надолу */
  justify-content: flex-start; /* блокове към началото на главната ос */
  align-items:     flex-start; /* блокове към началото на напречната ос */
}

Резултат от изпълнението на кода:

Пример

Нека сега притиснем блоковете към края на напречната ос, тоест към дъното. За това align-items ще установим в стойност flex-end:

css.parent {
  display: flex;
  flex-direction:  row;        /* главна ос надясно, напречна надолу */
  justify-content: flex-start; /* блокове към началото на главната ос */
  align-items:     flex-end;   /* блокове към края на напречната ос */
}

Резултат от изпълнението на кода:

Пример

Нека сега насочим главната ос отгоре надолу. Тъй като главната ос е вертикална, то напречната ще бъде насочена отдясно наляво. Нека притиснем блоковете по двете оси към техните начала:

css.parent {
  display: flex;
  flex-direction:  column;     /* главна ос надолу, напречна надясно */
  justify-content: flex-start; /* блокове към началото на главната ос */
  align-items:     flex-start; /* блокове към началото на напречната ос */
}

Резултат от изпълнението на кода:

Пример

А сега по напречната ос ще притиснем блоковете към нейния край:

css.parent {
  display: flex;
  flex-direction:  column;     /* главна ос надолу, напречна надясно */
  justify-content: flex-start; /* блокове към началото на главната ос */
  align-items:     flex-end;   /* блокове към края на напречната ос */
}

Резултат от изпълнението на кода:

Пример

Нека притиснем блоковете към края на двете оси:

css.parent {
  display: flex;
  flex-direction:  column;   /* главна ос надолу, напречна надясно */
  justify-content: flex-end; /* блокове към края на главната ос */
  align-items:     flex-end; /* блокове към края на напречната ос */
}

Резултат от изпълнението на кода:

Пример

Нека променим посоката на главната ос - ще я насочим отдолу нагоре. При това напречната ос няма да промени посоката си, тъй като главната ос все още е вертикална.

Нека притиснем блоковете към началото на двете оси:

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* главна ос нагоре, напречна надясно */
  justify-content: flex-start;     /* блокове към началото на главната ос */
  align-items:     flex-start;     /* блокове към началото на напречната ос */
}

Резултат от изпълнението на кода: