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 ...