HTML & CSS
/Intermediate
Flex Container
Definition
By setting `display: flex` on a parent element, it becomes a flex container. All direct children automatically become flexible items.
Explain Like I'm New
Before Flexbox, aligning 3 boxes side-by-side required terrifying math and float hacks. With Flexbox, you just go to the parent box and say `display: flex`. Instantly, all the children inside line up in a perfect row.
Real World Example
Creating a Navigation Bar. The `<ul>` is the flex container, and the `<li>` links inside it automatically line up horizontally.
Common Use Cases
- •1-Dimensional layouts (Rows OR Columns)
- •Aligning items easily
Interactive Example
Interview Questions
basic
- What CSS property turns a normal `<div>` into a flex container?
intermediate
- Does `display: flex` affect the grandchildren of the container?