Tailwind CSS
/Beginner
Flex Container
Definition
A utility class (`flex`) that turns a normal block-level element into a flexbox container, enabling powerful alignment and distribution of its direct children.
Explain Like I'm New
By default, HTML elements stack vertically on top of each other like blocks. Applying `flex` to the parent instantly forces all of its children to sit horizontally in a row.
Real World Example
Creating a Navbar. You want your Logo on the far left, and your Login Button on the far right. You wrap them both in a `div`, add `flex`, and then tell the flexbox to push them apart.
Common Use Cases
- •Navbars
- •Card layouts
- •Centering items perfectly
Interactive Example
Interview Questions
basic
- What Tailwind class activates Flexbox on an element?
intermediate
- Does adding `flex` to a parent affect the grandchildren (the children of its children)?