Scribd
Upload
11 views

Flex Align Content in CSS - CN

Flex

Uploaded by

laptopbackup66
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Flex Align Content in CSS - CN

Flex

Uploaded by

laptopbackup66
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Flex Align Content in CSS

Overview
Align-content property is used to align the flex lines, i.e., multiple lines of flex items.

This property aligns flex lines when there is extra space in the cross-axis, similar to how
justify-content aligns individual items within the main-axis.

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

● stretch ( Default )
● flex-start
● flex-end
● center
● space-between
● space-around

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

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

Browser :

1
flex-start
The flex-start value aligns the multiple lines of flex items towards the start of the cross
axis. Use align-content: flex-start ; in the flex-container class.

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

Browser :

flex-end
The flex-end value aligns the multiple lines of flex items towards the end of the cross
axis. Use align-content: flex-end ; in the flex-container class.

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

Browser :

2
center
The center value aligns the multiple lines of flex items towards the center of the cross
axis.

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

Browser :

space-between
The space-between value distributes the remaining space between the multiple lines
of flex items evenly along the cross axis. No space is provided towards the start of
the first container and the end of the last container. The space at the top and bottom of
the container is because of the margin of the flex items.

CSS : .flex-container {
display:flex;
flex-wrap: wrap;
align-content: space-between;
}

Browser :

3
space-around
The space-around value distributes the remaining space around the multiple lines of
flex items evenly along the main axis.

CSS : .flex-container {
display:flex;
flex-wrap: wrap;
align-content: space-around;
}

Browser :

You might also like