HTML & CSS
/Intermediate
Flex Items
Definition
The direct children of a flex container. They have specific CSS properties applied to them that control how they grow, shrink, or reorder themselves within the container.
Explain Like I'm New
Once the parent is a Flex Container, the children gain superpowers. You can tell one child 'Take up twice as much space as your brothers', or you can tell the 3rd child 'Visually move yourself to the front of the line'.
Real World Example
A classic sidebar layout. The main article is told to `flex-grow: 1` (take up all remaining space), while the sidebar is given a fixed width.
Common Use Cases
- •Dynamic width columns
- •Reordering elements for mobile devices without changing HTML
Interactive Example
Interview Questions
basic
- What property allows a flex item to grow and fill empty space?
intermediate
- How can you make the 3rd div in the HTML appear first on the screen?