Using Flex CSS: Most Important Concepts (Examples)

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.

A common example of using Flexbox is this:

There is a parent-element and its 3 child-elements.

We set display: flex on the parent-element. This 'unlocks' the Flexbox functionalities and it automatically makes this element the so-called flex-container and its direct child-elements the so-called flex-items.

The default behavior is that the 3 flex-items will be sitting next to each other horizontally.

We used justify-content: center to center all flex-items horizontally.

If we also want to center them vertically, we can use align-items: center:

CSS-Using-Flex-Example-Centering-Both-Horizontally-And-Vertically.png

Note the gaps between the flex-items in the illustrations. In practice you need to use gap: 5px on the flex-container to do that.

The important thing to understand about Flexbox - and what it differentiates from CSS Grid - is that with Flexbox you always work with 1 direction: either the horizontal (row) direction or the vertical (column) direction. The default direction is horizontal (row).

But sometimes we want it to be vertical, just change the flex-direction to column:

CSS-Using-Flex-Example-Flex-Direction-Column (1).png

The tricky part comes when we now want to center this.

When you use flex-direction: column the justify-content and align-items properties 'flip', so now justify-content works for the vertical axis and the align-items property works for the horizontal axis:

CSS-Using-Flex-Example-Flex-Direction-Column-Align-Items-Center (1).png

And to also center them vertically now:

CSS-Using-Flex-Example-Flex-Direction-Column-Align-Items-And-Justify-Content-Center.png

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

Using Flex CSS: Most Important Concepts (Examples)

Comments

More from this blog

CSS3 Border Box (Example + Illustration)

Flexbox Properties: Most Common + Rare Properties

Flexbox Spacing Between Items: Examples

Flex Container HTML: Example

Flexbox Examples: Most Common Layouts (+ Illustrations)

Command Palette

Comments

More from this blog