align-self in CSS Flexbox β How to Layout Flex Item
align-self specifies how browsers should position selected flexible items along the flexbox's cross-axis.
align-self
affects only the selected flexible itemβnot all the flexbox's items.align-self
overrides thealign-items
property.
The align-self
property accepts the following values:
stretch
flex-start
center
flex-end
baseline
Let's discuss the five values.
What Is align-self: stretch
in CSS Flexbox?β
stretch
stretches the selected flexible items to fill the flexbox's cross-axis.
Here's an example:
- CSS
- HTML
section {
display: flex;
align-items: flex-start;
background-color: orange;
margin: 10px;
height: 300px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}
.flex-item2 {
align-self: stretch;
}
<section>
<div class="flex-item1">1</div>
<div class="flex-item2">2</div>
<div class="flex-item3">3</div>
<div class="flex-item4">4</div>
</section>
We used the stretch
value to stretch flex-item2
to fill the <section>
's cross-axis.
What Is align-self: flex-start
in CSS Flexbox?β
flex-start
aligns the selected flexible items with the cross-start edge of the flexbox's cross-axis.
Here's an example:
- CSS
- HTML
section {
display: flex;
align-items: center;
background-color: orange;
margin: 10px;
height: 300px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}
.flex-item2 {
align-self: flex-start;
}
<section>
<div class="flex-item1">1</div>
<div class="flex-item2">2</div>
<div class="flex-item3">3</div>
<div class="flex-item4">4</div>
</section>
The snippet above used the flex-start
value to align flex-item2
to the cross-start edge of the <section>
's cross-axis.
What Is align-self: center
in CSS Flexbox?β
center
aligns the selected flexible items to the center of the flexbox's cross-axis.
Here's an example:
- CSS
- HTML
section {
display: flex;
align-items: flex-start;
background-color: orange;
margin: 10px;
height: 300px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}
.flex-item2 {
align-self: center;
}
<section>
<div class="flex-item1">1</div>
<div class="flex-item2">2</div>
<div class="flex-item3">3</div>
<div class="flex-item4">4</div>
</section>
The snippet above used the center
value to align flex-item2
to the center of the <section>
's cross-axis.
What Is align-self: flex-end
in CSS Flexbox?β
flex-end
aligns the selected flexible items with the cross-end edge of the flexbox's cross-axis.
Here's an example:
- CSS
- HTML
section {
display: flex;
align-items: flex-start;
background-color: orange;
margin: 10px;
height: 300px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}
.flex-item2 {
align-self: flex-end;
}
<section>
<div class="flex-item1">1</div>
<div class="flex-item2">2</div>
<div class="flex-item3">3</div>
<div class="flex-item4">4</div>
</section>
The snippet above used the flex-end
value to align flex-item2
to the cross-end edge of the <section>
's cross-axis.
What Is align-self: baseline
in CSS Flexbox?β
baseline
aligns the selected flexible items with the baseline of the flexbox's cross-axis.
Here's an example:
- CSS
- HTML
section {
display: flex;
align-items: flex-end;
background-color: orange;
margin: 10px;
height: 470px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}
.flex-item1 {
font-size: 1.5rem;
}
.flex-item2 {
font-size: 3rem;
align-self: baseline;
}
.flex-item3 {
font-size: 0.7rem;
}
.flex-item4 {
font-size: 5rem;
}
<section>
<div class="flex-item1">1</div>
<div class="flex-item2">2</div>
<div class="flex-item3">3</div>
<div class="flex-item4">4</div>
</section>
We used the baseline
value to align flex-item2
to the <section>
's baseline.
Overviewβ
This article discussed what a CSS align-self
property is. We also discussed five of its values.