Scribd
Upload
11 views4 pages

Flex Align Self in CSS - CN

Flex

Uploaded by

laptopbackup66
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views4 pages

Flex Align Self in CSS - CN

Flex

Uploaded by

laptopbackup66
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Flex Align Self in CSS

Overview
The align-self property is used for the alignment of selected flex items inside the flex
container. This overrides the default alignment set by the flex container.

Align-self can be set to any of these values:

● auto ( Default )
● flex-start
● flex-end
● center
● stretch
● baseline

HTML : <div class="flex-container">


<div >div1</div>
<div id="div2"> div2</div>
<div >div3</div>
</div>

CSS : .flex-container {
display:flex;
align-items: stretch ;
}
#div2{
align-self : flex-start ;
}

Browser :

❖ In general align-items were stretch but we did align-self as flex-start for 2nd div.

1
flex-end
The flex-end value aligns the selected flex items towards the end of the cross axis.

CSS : .flex-container {
display:flex;
align-items: stretch ;
}
#div2{
align-self : flex-end ;
}

Browser :

center
The center value aligns the selected flex items towards the center of the cross axis.

CSS : .flex-container {
display:flex;
align-items: stretch ;
}
#div2{
align-self : center ;
}

Browser :

2
stretch
The stretch value stretches the selected flex items to fill the container along the cross
axis.

CSS : .flex-container {
display:flex;
align-items: stretch ;
}
#div2{
align-self : stretch;
}

Browser :

baseline
The baseline value aligns the flex items such as the baselines of the content inside the
items. This means that the bottom base of the content inside the flex item will be the
axis to align the items.
To see this property work, we need to make some variation in the above code. The
changes are highlighted:

HTML : <div class="flex-container">


<div id= ”div1”> <h3> div1 </h3> </div>
<div > <h2> div2 </h2> </div>
<div id= ”div3” > <h1> div3 </h1> </div>
</div>

CSS : .flex-container {
display:flex;
align-items: stretch;
}

3
#div1{
align-self: baseline;
}
#div3{
align-self: baseline;
}

Browser :

Here, h2 is not given the baseline property. Therefore, it is not aligned and is
stretched by default.

You might also like