Выравнивание отдельного элемента в flex модели

Следующие свойства, которые мы с вами изучим, задаются уже не родителю флекс-элементов, а самим элементам. Давайте рассмотрим свойство aling-self, которое представляет собой тот же align-items, только для конкретного блока.

Пусть у нас есть флекс-блоки, выстроенные в ряд. Выровняем их по центру по вертикали, задав align-items в значении center, а второму элементу дадим дополнительный класс elem и для него зададим другое выравнивание, например, прижмем его к верхнему краю.

Для этого нашему элементу с классом elem установим свойство align-self в значение flex-start:

<div class="parent"> <div class="child">1</div> <div class="child elem">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> </div> .parent { display: flex; align-items: center; width: 300px; height: 200px; border: 1px solid red; } .child { width: 50px; height: 50px; border: 1px solid green; } .elem { align-self: flex-start; }

:

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

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

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