Im here today to talk about one of my favorite and most utilized CSS web layout models, the CSS Flexible Box Layout, also known as the Flexbox. Flexbox makes it easier to design flexible responsive layout structure without having to use float or positioning.

This is an example of a Flexbox

For the most part anytime I need to display a collection of data in the form of “rows” or “columns” I use Flexbox. One of the greatest features about Flexbox is the responsiveness. It’s very easy to allow resizing and adjusting. You can turn a row into a column depending on the available screen size. Here are 6 common properties for Flexbox:

— flex-direction

— flex-wrap

— flex-flow

— justify-content

— align-items

— align-content

I will explain each one of these properties and show a couple examples using Flexbox. So, I created a very simple example to demonstrate how each of these properties works. I will be using JavaScript and React for this demonstration. Below is a screenshot of my very simple Flexbox and it’s empty CSS(for now).

This is my Flexbox container(one div containing other divs) with 3 elements or cards
As you can see the CSS is completely empty for now

With all of this set up, my browser looks like the screenshot below when I run my application.

This is my current browser display

The first thing we want to do is enable Flexbox. This is possible by adding the following command to the ‘flexbox-container’ in the CSS.

display: flex

Below is my updated CSS…

Our 1,2, and 3 are now in a row bunched together on the left side. You can see the image below.

We can some styling by adding “justify-content” and “align-items”. Justify-content will align the items in the container horizontally. This is kind of like “text-align”. Align-items will align the items in the container vertically. It will be hard to see the results of align-items unless we add a height to the Flexbox container. Below is a screenshot of my updated CSS.

I randomly picked 600. Again, this is to help show how “align-items” works. Remove the height property to see the difference.

Now my browser looks the screenshot below.

If you remove the height from the CSS, the 123 will move to the top.

We can spread these items out a little bit for styling by adding some padding and margin to each div item in the Flexbox container. I will also add a border to each item to add the box or card look. Below are screenshots of my updates…

I accessed each item in the Flexbox container by calling the flexbox container class name followed by the element. This is a shortcut to avoid adding classes for each item in the containing div.
We now have 3 boxes or cards in a row

We can turn the row into a column by adding one line to the Flexbox container CSS. This is great for conditional rendering in the CSS. I use this all the time for resizing and responsiveness. You can check out the screenshots below.

The only line I added was line 3…flex-direction: column

We could also reverse the order if necessary in the form of a column or row. I’ll show some screenshots of this below…

I changed column to column-reverse
column-reverse
I changed column-reverse to row-reverse
row-reverse

You can now set up a simple Flexbox! You can view more documentation here and here. You can stop here if you like or continue with the article to learn about flexbox responsiveness.

There are 3 options that we can use for resizing and responsiveness.

— set the width to a percentage of the screen size

— flex-wrap to wrap the items to the next line if items can’t fit current window

— flex-flow is a combination of flex-direction and flex-wrap..the default is “row nowrap”

Since we have 3 items I will set the Flexbox container width to “100%”, and each item to “33%”(Because we have 3 items) . Below is a screenshot of my CSS

Below I will display two screenshots with the browser to show the responsiveness. The first one will be a fullscreen and the other one will be half the size of my screen.

Full Screen
Half Screen

Its a little difficult to see the difference here, but I promise it’s different! Sometimes we might not want the items in the Flexbox container to resize, but we still want them to remain within the screen boundaries. This is when flex-wrap comes into play. Flex-wrap will wrap our items to the next line if enough space isn’t provided. Below is a screenshot of my CSS and and my browser at full screen and 750px(Mobile Screen size).

I added flex-wrap:wrap and I changed the width in flexbox-container div to a static value
Full Screen
Mobile Screen

And lastly I’ll show how we can combine flex-direction and flex-wrap together using flex-flow. Below is a screenshot of my CSS and two screenshots of browser like before. One will be a full screen and the other will be a mobile screen.

I removed flex-direction and flex-wrap and added flex-flow: wrap-reverse
Full Screen
Mobile Screen

You can see not only do our items wrap, but they are in reverse order! There are a couple more options available here such as flex-grow, flex-shrink, and more. Flexbox is awesome, and I hope this article encourages you to use it! As I previously mentioned I use Flexbox all the time.

I hope you found this article helpful! Feel free to reach out to me on LinkedIn or check out my portfolio site! Make today a great one!

Full Stack Software Engineer