rootlearn.
com
CSS Flexbox
root
Chéat Sheet
Part - 1
Manish Poduval
1/15 rootlearn.com
What is it ?
The Flexible Box Module (Flexbox) helps us lay out,
align and distribute space amongst items in a container
root
container
1 2 3
items
css index.css
Your first step would be to 1
// Target your container
add this in your styles 2
.container {
display: flex;
4 }
Manish Poduval
2/15 rootlearn.com
Flexbox architecture
The items are distributed along the main axis and cross axis. And,
depending on the flex-direction property, the layout position
root
changes between rows and columns.
Manish Poduval
3/15 rootlearn.com
Flexbox properties
We’ll divide this cheatsheet in two parts
root
Properties for the containe
Properties for the items
container
items
Manish Poduval
4/15 rootlearn.com
Properties for the container
css index.css
What does this line do ?
1
// Target your container
2
.container {
3
display: flex;
4 }
Enables a flex context for all its direct children.
root
By default all items are aligned in a row
main axis
You can change the default direction to a column as well
css index.css
1
// Target your container
main axis
2
.container {
3
display: flex;
4
flex-direction: column;
5 }
Manish Poduval
5/15 rootlearn.com
Properties for the container
flex-direction will help you establish the main-axis
css index.css
main axis
1
// Target your container
2
.container {
root
3
display: flex;
4
flex-direction: row-reverse;
5 }
css index.css
1
// Target your container
2
.container {
3
display: flex;
4
flex-direction: column-reverse;
main axis
5 }
Manish Poduval
6/15 rootlearn.com
Properties for the container
flex-wrap will wrap flex items onto multiple lines, from top to bottom.
css index.css
1
// Target your container
2
.container {
vv
3
display: flex;
4
flex-wrap: wrap;
5 }
css index.css
1
// Target your container
2
.container {
3
display: flex;
4
flex-wrap: wrap-reverse;
5 }
flex-flow will combine flex-direction and flex-wrap into one.
css index.css
1
// Target your container
2
.container {
3
display: flex;
4
flex-flow: column wrap;
5 }
Manish Poduval
7/15 rootlearn.com
Properties
Propertiesforforthecontainer
container main axis
justify-content will help you align the items along the main axis
css index.css
root
1
.container {
2j justify-content: flex-start
display: flex;
us justify-content: flex-start;
ti align
Items }
to the left side of the container.
fy
-
co
nt
en
css index.css
t
1
4 .container {
2
justify-content: flex-end
display: flex;
3
justify-content: flex-end;
4 }
Items align to the right side of the container.
justify-content: center
Items align at the center side of the container.
Manish Poduval
8/15 rootlearn.com
Properties for the container main axis
justify-content will help you align the items along the main axis
justify-content: space-between
Items display with equal spacing between them
justify-content: space-around
Items display with equal spacing around
inner items half equal equal half
justify-content: space-evenly
Items display with equal spacing around
them on all sides
equal equal equal equal
Manish Poduval
9/15 rootlearn.com
Properties for the container cross axis
align-items will help you align the items along the cross axis
align-items: flex-start
root
Items align to the top of the container.
align-items: flex-end
Items align to the bottom of the container
align-items: center
Items align at the vertical center of the
container.
Manish Poduval
10/15 rootlearn.com
Properties for the container cross axis
align-content will help you align multiple lines along the cross
axis
This can be confusing
root
align-content determines the spacing between
multiple lines
align-items determines how the items as a whole
are aligned within the container.
When there is only one line, align-content has no effect.
Manish Poduval
11/15 rootlearn.com
Properties for the container cross axis
align-content will help you align multiple lines along the cross
axis
1 2 3 4 5 6 7
root
align-content: flex-start
Lines are packed at the top of the container
align-content: flex-end
1 2 3 4 5 6 7
Lines are packed at the bottom of the
container
1 2 3 4 5 6 7
align-content: center
Lines are packed at the vertical center of the
container.
Manish Poduval
12/15 rootlearn.com
Properties for the container cross axis
align-content will help you align multiple lines along the cross
axis
1 2 3 4 5 6 7
root
align-content: space-between
Lines display with equal spacing between
them.
1 2 3 4 5 6 7
align-content: space-around
Lines display with equal spacing around
them.
1 2 3 4 5 6 7
align-content: stretch
Lines are stretched to fit the container.
Manish Poduval
13/15 rootlearn.com
Properties for the container
gap explicitly controls the space between flex items.
It applies that spacing only between items not on the outer edges.
rovot
gap: 10px;
10px 10px
spacing between items
50px 50px
10px
gap: 10px 50px;
spacing between items -> row column
Manish Poduval
14/15 rootlearn.com
Resources to practice
root
codingfantacy.com mastery.games
flexboxdefence.com flexboxfroggy.com
Manish Poduval
Thank you!
Want to upksill yourself
with our live cohort
based courses ?
Scan this to know more
