Scribd
Upload
15 views3 pages

Flex Align Items 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
15 views3 pages

Flex Align Items 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/ 3

Flex Align Items in CSS

Overview
The align-items property is used to align the flex items along the cross-axis. The
cross-axis is perpendicular to the main axis.

If the main axis is horizontal, then the cross-axis is vertical. If the main axis is vertical,
then the cross axis is horizontal.

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

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

stretch
The stretch value stretches the flex items to fill the container along the cross axis.
This is the default value. Else use align-items: stretch ; in the flex-container class.

CSS : .flex-container {
display:flex;
align-items: stretch ;
}
.flex-container div {
width:50px;
min-height : 50 px ;
}

Browser :

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

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

Browser :

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

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

Browser :

center
The center value aligns the items towards the center of the cross axis

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

2
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 work with this property, we need to make some variations in the above code. The
changes are highlighted.

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


<div > <h3> div1 </h3> </div>
<div > <h2> div2 </h2> </div>
<div > <h1> div3 </h1> </div>
</div>

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

Browser :

You might also like