An introduction to Flexbox
Learn Flexbox through demos and by building an application
Flexbox is amazing. It has changed how we write the CSS and it provides built-in support for responsiveness. So all the responsiveness of your website is handled by Flexbox making it easier to create websites.
Flexbox is used for building one dimensional layouts.
If you have used Bootstrap
framework for making responsive design, then you might be aware that, starting with Bootstrap version 4,
it’s entirely based on Flexbox. Before Bootstrap version 4
, it handled responsiveness using float
properties but from version 4, the entire framework is re-written using Flexbox.
So knowing Flexbox is really an important thing because nowadays almost all websites are using flexbox functionality and knowing it is an important part from interview point of view also.
So Let’s get started
Flexbox allows the elements on the page to grow and shrink based on the device width so we don’t need to write much CSS code to handle responsiveness.
To use Flexbox, the first thing you need to define is a flex container with display: flex
property.
Take a look at the below layout
As we know, div is a block element so each div is displayed on a separate line
Here, the main div is the container that holds other divs. So we need to add the display: flex
property to the parent main div container.
As you can see above, Just adding display: flex
makes the child elements to display side by side.
Let’s look at the properties available for the main container which holds the child elements.
flex-direction
By default the direction in which elements are displayed is row
so
.list {
margin: 5px;
padding: 5px;
background-color: orange;
display: flex;
}
is same as
.list {
margin: 5px;
padding: 5px;
background-color: orange;
display: flex;
flex-direction: row;
}
The flex-direction
property takes one of the following values
row
: This is the default value forflex-direction,
so when we don’t specify anyflex-direction
, it will berow
by default.
2. row-reverse
: It displays child elements in reverse order side by side
3. column
: It displays child elements one below the other
4. colum-reverse
: It displays child elements in reverse order one below the other.
One thing to keep in mind is that, In Flexbox, how the elements are displayed is defined by main axis
or cross axis
.
Whenever we define flex-direction
as row
or row-reverse
, the main axis
run horizontally
and cross axis
runs vertically
.


and when we define flex-direction
as column
or column-reverse
, the main axis
run vertically
and cross axis
runs horizontally
.


justify-content
justify-content
defines where the elements will be displayed on main axis
.
When we don’t specify the flex-direction
, it means it’s considered as row
by default so the main axis
is horizontal
here.
The justify-content
property takes the following values
flex-start
: This is the default value forjustify-content
. So when we don’t specify this property,justify-content
value will beflex-start
.
2. flex-end
: It displays elements at the end of main axis
3. center
: It displays the elements in the center of the main axis
. This property value is mostly used when we need to center
content horizontally
.
4. space-between
: It will equally distribute the space between the middle elements except the first
and last
element. This is the most widely used property value as compared to others
5. space-around
: This will distribute the equal amount of space to the right and left of each element except the first and last element. For middle elements, space is twice when compared to the first or last element.
So if each element has 10% space on right and left respectively then number 2 will have 20% space on left because number 1 has 10% space on right and number 2 has 10% space on left so making it 10 + 10 = 20%. Similarly, on the right of number 2, space will also be 20%. Whereas left side of number 1 and the right side of number 3 will have 10% space.
6. space-evenly
: This will equally distribute the space between each element. So every element will have equal space on the left and right sides.
The beauty of using Flexbox is that it makes the layout responsive without cutting the elements or adding a scrollbar as can be seen below

Even though we are resizing the browser window, the elements do not go out of the window or do not add scrollbar but they will adjust to the width of the device or web page.
So we don’t need to add a lot of extra code to make it responsive if we use Flexbox.
align-items
This property is used to align items across the cross axis
.
The align-items property takes the following values
stretch
: This is the default value so if we don’t specify this property,align-items
value will bestretch
. It stretches the height of each element to be equal to the height of the tallest element.
As you can see here, we have not specified the flex-direction,
so the main axis
is horizontal
and cross axis
is vertical
so even if we have specified the height of number 2 to be 250px
but because of the default stretch
value, all elements will have an equal height which is 250px
and all the elements are stretched vertically.
As you can see here, we have specified the flex-direction
as column
so the main axis
is vertical and cross axis
is horizontal
and align-items
property is used to align the items across the cross axis
, the elements are stretched horizontally.
2. flex-start
: This will display the elements at the start of the area.
3. flex-end
: This will display the elements at the end of the area.
4. center
: It displays the elements in the center of the main axis
. This property value is mostly used when we need to center content horizontally.
As you can see the elements are centered vertically because the cross axis
is vertical
As you can see the elements are centered horizontally because the cross axis
is horizontal
All the above flex properties like display
, flex-direction
, justify-content
and align-items
are added to the container which holds the child elements.
Now we will see the flex properties which are used for each flex element
flex-wrap
The flex-wrap
property allows us to move elements to the next row if it does not fit on the current row.
Take a look at the below layout which does not use flex-wrap
property
Try resizing the browser window, you will see that nothing changes.
Now take a look at the below layout which uses the flex-wrap
property

As you can see, each element is taking its allocated space and when we resize the browser windows the elements will move to the next row if there is not enough space for that element making it a good fit for responsive design
order
The order
property allows us to change the order of elements displayed in the flex container. The default order value is zero
.
The element with lowest order will be displayed on left side and element with highest order will be displayed on right side. The elements which does not have any order defined will have order of zero.
Take a look at below layout
As can be seen in the above demo, an element with class first
has order 3 and element with class third
has order -2, the other elements will have order 0 so the highest order element will be displayed on right and the lowest order element will be displayed on left.
Adding order allows us to change the position of displayed elements on smaller width devices like mobile phones.
flex-grow:
This property defines how the element will grow in relation to other elements. The default value of flex-grow
is zero
Take a look at below layout
As you can see, setting flex-grow
to 1 for each element will allow that element to take the entire width that element has.
Let’s take a look at the below layout now
As you can see, the first element has flex-grow
or value 3 so it will grow 3 times compared to other
flex-basis
It allows us to define the width of the element. The default value of flex-basis
is auto.
As you can see here, just specifying flex-basis
with specific width, the first element will shrink when the screen size is smaller even though the width is set to 400px.
flex-shrink
It allows us to specify whether the element should be shrunk smaller than its actual width or not. It has a default value of 1 which means it can become smaller than its specified width.
Setting flex-shrink
to 0 will not allow the element to shrink less than the specified width in flex-basis
property.
Instead of adding separate flex-grow
, flex-shrink
and flex-basis
properties. It’s normal practice to use a shorthand property syntax so
flex: 0 0 250px
is same as
flex-grow: 0;
flex-shrink: 0;
flex-basis: 250px;
respectively.
So now, we are done with flex properties for flex containers as well as flex items.
Now, we will take a look at some real use case
Centering an element using flexbox
The justify-content
and align-items
property is mostly used to align an element at the center
position.
As you can see by just using the display
, justify-content
and align-items
properties, we can make an element centered aligned.
Note that, justify-content
is used to align across main axis
and align-items
is used to align across cross axis
.
Live application using flexbox: https://flexbox-demo.netlify.app/
Try resizing the browser window in the above application and you will see that it’s adjusting to the width of the page making it responsive
You can find Github source code for it HERE
That’s it for today. I hope you learned something new.
Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.