Using Flex CSS: Most Important Concepts (Examples)
These are the most common examples to master in Flexbox
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.
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.
justify-content: center to center all flex-items horizontally.
If we also want to center them vertically, we can use
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
The tricky part comes when we now want to center this.
When you use
flex-direction: column the
align-items properties 'flip', so now
justify-content works for the vertical axis and the
align-items property works for the horizontal axis:
And to also center them vertically now:
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.
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: