CSS
What is Flexbox?
CSS Flexible Box Layout — a one-dimensional layout model for arranging items in rows or columns.
CSS Flexbox is a layout module that provides an efficient way to arrange, align, and distribute space among items in a container, even when their sizes are dynamic or unknown.
Core Concepts
- Flex container: Element with
display: flex - Flex items: Direct children of the container
- Main axis: Primary direction (row or column)
- Cross axis: Perpendicular to the main axis
Key Properties
justify-content— Align along main axisalign-items— Align along cross axisflex-wrap— Whether items wrapflex-grow— Item growth proportiongap— Space between items
FAQ
When should I use Flexbox vs Grid?
Flexbox is best for one-dimensional layouts (rows OR columns). CSS Grid excels at two-dimensional layouts (rows AND columns simultaneously). Use Flexbox for component-level layouts and Grid for page-level structure.
Related Tools
Related Terms