align-self # 02

Align-self

With the align-self property, we can align each child element vertically and horizontally according to flex-flow.

Align-self depends on flex-direction.

Legal Values

• auto (default)
  

• baseline

• center

• flex-start

• flex-end

• stretch

Here, baseline works the same as flex-start.

For a stretch, use width but don’t use a height for the child item. 

Difference between align-self and align-items

• align-self is used to align individual flex items. Items should be aligned with flex items.

• align-items are used to align flex items. Items should be aligned from the flex container.

<div class="container">
       <div class="child1">Child 1</div>
       <div class="child2" style="align-self: center;">Child 2</div>
       <div class="child3">Child 3</div>
</div>

Result

For align-self: center and flex-direction: row

For align-self: center and flex-direction: column

Previous PostNext Post