An introduction to Flexbox

Yogesh Chavan
Jun 7, 2020 · 8 min read

Learn Flexbox through demos and by building an application

Photo by Pankaj Patel on Unsplash

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.

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

Without flexbox

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.

Using flexbox

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.

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

  1. row: This is the default value for flex-direction, so when we don’t specify any flex-direction, it will be row by default.
flex-direction row

2. row-reverse: It displays child elements in reverse order side by side

flex direction row-reverse

3. column: It displays child elements one below the other

flex direction column

4. colum-reverse: It displays child elements in reverse order one below the other.

flex direction row-reverse

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.

https://mdn.mozillademos.org/files/15614/Basics1.png
https://mdn.mozillademos.org/files/15616/Basics3.png

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

https://mdn.mozillademos.org/files/15615/Basics2.png
https://mdn.mozillademos.org/files/15617/Basics4.png

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

  1. flex-start: This is the default value for justify-content. So when we don’t specify this property, justify-content value will be flex-start.
justify-content flex-start

2. flex-end: It displays elements at the end of main axis

justify-content flex-end

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.

justify-content center

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

justify-content space-between

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.

justify-content space-around

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.

justify-content: space-evenly

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

Responsiveness of Flexbox

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.

This property is used to align items across the cross axis.

The align-items property takes the following values

  1. stretch: This is the default value so if we don’t specify this property, align-items value will be stretch. It stretches the height of each element to be equal to the height of the tallest element.
align-items: stretch for flex-direction: row

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.

align-items: stretch for flex-direction: column

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.

align-items: flex-start for flex-direction: row
align-items: flex-start for flex-direction: column

3. flex-end: This will display the elements at the end of the area.

align-items: flex-end for flex-direction: row
align-items: flex-end for flex-direction: column

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.

align-items: center for flex-direction: row

As you can see the elements are centered vertically because the cross axis is vertical

align-items: center for flex-direction: column

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

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

without flex-wrap

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

with flex-wrap
flex-wrap demo

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

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

flexbox order

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.

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

flex-grow first demo

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

flex-grow second demo

As you can see, the first element has flex-grow or value 3 so it will grow 3 times compared to other

It allows us to define the width of the element. The default value of flex-basis is auto.

flex-basis demo

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.

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.

flex-shrink demo

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

The justify-content and align-items property is mostly used to align an element at the center position.

center align using flexbox

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.

The Startup

Get smarter at building your thing. Join The Startup’s +789K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Yogesh Chavan

Written by

Full Stack Developer | JavaScript | React | Nodejs. https://dev.to/myogeshchavan97

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Yogesh Chavan

Written by

Full Stack Developer | JavaScript | React | Nodejs. https://dev.to/myogeshchavan97

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store