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 CSS3 Course.
There are 2 major options in CSS3 to implement layouts: Flexbox & CSS Grid.
Flexbox is the one you want to use more frequently, in my experience.
It all starts by setting display: flex on a parent element:
This is the default layout: flex-items will be sitting on the same row next to each other.
Now we have 'unlocked' the Flexbox functionalities.
The element with display: flex is called the flex-container and its direct child elements are called the flex-items.
We can now use some Flexbox properties on both the flex-container and flex-items individually.
Let's say we want to center all flex-items horizontally. The justify-content property is used here for horizontal alignment:
Or maybe we want it to sit at the end, horizontally:
Note that you can also use 'flex-end' instead of 'end'. Flex-end still has better browser support, but the future is 'end' (the properties across Flexbox and CSS Grid are being harmonized -- i.e. the 'flex-' and 'grid-' prefixes will be removed so we have the same properties in both Flexbox & CSS Grid).
So justify-content is for horizontal alignment here, now we also want to look at vertical alignment. We can use align-items for that:
Or if we want the flex-items to be centered both horizontally and vertically:
Okay, so we used justify-content for horizontal alignment and align-items for vertical alignment.
Important to understand about Flexbox is that you always work with 1 direction. So the flex-items will always follow 1 particular direction. The default is horizontal (row).
But we can also change the direction to vertical (column):
We used flex-direction: column to change the direction.
The tricky part about this is now that justify-content and align-items flip.
Justify-content is now for the vertical axis and align-items for the horizontal axis.
Centering the flex-items vertically with justify-content now:
And to center them horizontally too, use align-items now:
This was all for aligning ALL flex-items, but what if we just want to position 1 flex-item in a particular way? Let's go back to the default layout in Flexbox:
So in the default layout, we can use 'align-items' for the vertical alignment. That's for ALL flex-items.
Now we want to align 1 flex-item along the vertical axis. We can do that with align-self:
So just select the individual flex-item and use align-self.
That's for the vertical axis. How can we align an individual flex-item along the horizontal axis? Is there a 'justify-self' property as well?
The answer is no. We actually have to use the margin property with value auto:
So here the margin will take up all the space to the left of the selected flex-item, pushing itself to the right.
Note that also for individual alignment their functionalities switch sides when you use flex-direction: column.
To create the gaps between flex-items, you can use the gap properties: column-gap, row-gap and gap. I didn't include it here to keep things simple, so I cheated a bit with the gap in the illustrations.
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
