Flexbox Layout Examples: Most Common Layouts

Flexbox Layout Examples: Most Common Layouts

The layouts you will use 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.

Group 20.png

This is the default layout in Flexbox:

CSS Flexbox default layout (1).png

You set display: flex on an element. This makes that element the so-called flex-container and its direct child elements the so-called flex-items.

The flex-items are laid out horizontally next to each other, starting from the top-left corner.

Sometimes this is all you need.

However, let's say we want to position these flex-items differently. We have 2 major options: we can position them along the horizontal axis or the vertical axis.

To position the flex-items along the horizontal axis, use justify-content here:

CSS Flexbox default layout justify-content center.png

or

CSS Flexbox default layout justify-content end.png

Note that flex-end has better browser support at time of writing, but is being phased out in favor of end. This is because Flexbox and CSS Grid properties are being harmonized, so we can use the same properties in both systems. That's why the 'flex-' and 'grid-' prefixes are being dropped.

We can also align the flex-items vertically with align-items:

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

or

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

With Flexbox, the flex-items are always laid out along 1 direction: horizontal (row) or vertical (column). The default is horizontal (row).

However, sometimes we want it to be vertical (column):

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

When you do that, the align-items and justify-content properties 'flip', so now justify-content works 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 only want to position 1 flex-item in a certain way, not all flex-items. We can do that by selecting that individual flex-item and using align-self instead of align-items:

CSS Flexbox display flex align-self center.png

For the other axis, there is no justify-self. Instead we should use margin: auto:

CSS Flexbox display flex margin auto (1).png

Here, margin will take up all the space left to the flex-item, pushing the flex-item itself all the way to the right.

Sometimes, you will have more flex-items than here or just a few very large ones. In that case, they may overflow the container or stretch the container out. Instead of that, you probably want them to wrap onto a new line if they don't fit.

Use flex-wrap: wrap to do that:

CSS Flexbox flex wrap wrap.png

Here we have multiple rows now. If we want to center all of this vertically like before, we now have to use align-content instead of align-items:

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

So use align-items when you have 1 row or column, use align-content when you have multiple rows or columns (after wrapping).

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