Flexbox Crash Course
Explore how to use CSS Flexbox to create flexible and centered layouts. Learn how to enable flex containers, align items vertically and horizontally, and apply these concepts by building a sign-up page with practical examples. Understand flex container behaviors and start using flexbox for better front-end design.
We'll cover the following...
- What is Flexbox
- How does it Work?
- How Do you Hand Over the Flexbox Super Powers?
- What’s so Special?
- What May I do With the Flexbox Super Powers?
- How to Vertically Center an Item
- How to Horizontally Center an Item
- How then do you perfectly Center an Item?
- Applying this Knowledge to the Sign Up Project.
- Some Other Flexbox Magic
- Applying More than One Flex Container
- Flexbox Default Behaviour
- Conclusion
If you know me (from any online community) then you should know Flexbox happens to be my favorite concept in CSS. I find it beautiful.
This lesson will NOT teach you everything about Flexbox. You will, however, get a headstart on what flexbox is, and even get to use it in the sign-up project.
What is Flexbox
Flexbox is got a technical definition. For the sake of this course, I’ll skip the technicalities.
You may see flexbox as the layout ninja for CSS.
When you need to deal with the layout in your styles, the CSS Flexbox model is likely to be your best bet.
How does it Work?
Flexbox feeds largely on the parent-child relationship in a given DOM structure.
Flexbox is kicked off by making a parent element a flex container
Forget the lingo. It is like saying, Oh, I have found this parent element which I need for my layout. Alright, let me hand over to it some flexbox super powers
Yeah, that’s it.
How Do you Hand Over the Flexbox Super Powers?
Pretty simple.
Assuming the parent element in question is a div with a class name of flexy, just do this:
.flexy {
display: flex
}