Align-self
In this lesson, we will look at the behavior of the align-self rule that determines the alignment of an individual Flex item on the cross axis.
We'll cover the following
Align-self options
The align-items
rule determines how all Flex-items inside a Flex container are aligned on the cross-axis.
Sometimes there are exceptions to this rule. For instance, suppose there are blog post thumbnails centered on the cross-axis. However, as we put the mouse cursor over a Flex item, we would like to stretch that one blog post thumbnail.
We can define similar exceptions on any Flex item using align-self
.
The cross-axis alignment of a Flex item is determined as follows:
If there is an
align-self
rule defined on an individual Flex item, then this rule takes priority. Otherwise, thealign-items
property of the container determines the cross-axis alignment of the Flex item.
There is one more caveat that determines if align-self
has an effect on the cross-axis alignment of a Flex item: the Flex container has to have a defined cross-axis dimension.
- For
row
orrow-reverse
Flexboxes,height
has to be defined on the container. - For
column
orcolumn-reverse
Flexboxes,width
has to be defined on the container.
align-self
with horizontal flex-direction
Let’s examine the possible values for align-self
in the case of horizontal flex-direction
:
Get hands-on with 1200+ tech skills courses.