Flexbox Examples: Most Common Layouts (+ Illustrations)

Flexbox Examples: Most Common Layouts (+ Illustrations)

Check out the illustrations to learn the layouts you want 99% of the time in CSS

Wesley (ByteGrad)'s photo
Wesley (ByteGrad)
·Nov 11, 2021·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

You need to master both Flexbox and CSS Grid in order to professionally build modern websites & web apps. If you haven't mastered both of them yet, I highly recommend going through my CSS Course.

To 'unlock' the functionalities of Flexbox, simply pick an element and use display: flex:

CSS Flexbox default layout (1).png

This will give you the default layout.

The element with display: flex is the flex-container and its direct child elements are called the flex-items.

The flex-items are laid out horizontally next to each other in the default layout.

We can position these flex-items somewhere else, horizontally or vertically.

For example, horizontally we can do this by using justify-content:

CSS Flexbox default layout justify-content center.png

CSS Flexbox default layout justify-content end.png

And vertically we can use align-items:

CSS Flexbox justify-content center and align items center.png

CSS Flexbox justify-content center and align items end.png

Notice how the flex-items now always flow horizontally, they go from left to right.

Sometimes we want them to flow vertically, from top to bottom.

We can do that with flex-direction: column:

CSS Flexbox Default Layout When using flex-direction column (4).png

Then we can use justify-content and align-items again to position them differently, however now their axes have 'flipped'.

So now you need to use justify-content for the vertical axis and align-items for the horizontal axis:

CSS Flexbox flex direction column with align-items center.png

CSS Flexbox flex direction column with align-items center and justify-content end.png

Sometimes we just want to move 1 flex-item to a different position.

Select that one element and use align-self or margin: auto:

CSS Flexbox display flex align-self center.png

CSS Flexbox display flex margin auto (1).png

Also, if you have many flex-items or very large flex-items such that they do not fit, they will overflow the container or stretch the container out. You can make them wrap with flex-wrap: wrap:

CSS Flexbox flex wrap wrap.png

And now if you want to position everything along the vertical axis, you should use align-content instead of align-items (use align-content when you have multiple rows/columns like we have now after wrapping):

CSS Flexbox flex wrap wrap and align-content center.png

I cheated a bit in the illustrations by giving the flex-items some space between them. In practice you need to use one of the gap properties to achieve that: column-gap, row-gap or gap.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram

Did you find this article valuable?

Support Wesley (ByteGrad) by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
Share this