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

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

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

Для этого нашему элементу с классом `elem` установим свойство `aling-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; }`

:

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

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

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

← →
↑