The display: flex property enables the flexbox layout model, which allows elements within a container to align, distribute, and resize themselves dynamically. It simplifies responsive design by providing precise control over spacing, alignment, and ordering without relying on floats or manual calculations.
What does display: flex do?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
The display: flex; property turns an element into a flex container and its direct children into flex items. It enables a one-dimensional layout system, meaning it organizes content along either a row or a column while giving developers control over alignment, spacing, and reordering.
Property | Purpose | Example |
|---|---|---|
display: flex | Creates a block-level flex container | div.container { display: flex; } |
display: inline-flex | Creates an inline-level flex container | span.group { display: inline-flex; } |
Main Concepts
- Main axis: Defines direction of flex items (horizontal by default).
- Cross axis: Perpendicular to main axis (vertical by default).
- Flex container: The parent element controlling layout.
- Flex items: Direct children that flex and adapt.
CSS
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
margin: 10px;
}
In this layout, flex items distribute evenly across the main axis, maintaining equal spacing and vertical alignment without explicit width definitions.
Key Flexbox Properties
flex-direction— Sets item flow (row, column, row-reverse, column-reverse).justify-content— Aligns items along the main axis (start, center, space-between, etc.).align-items— Aligns items along the cross axis.flex-wrap— Allows items to wrap onto multiple lines when space runs out.align-content— Controls spacing between wrapped lines.
Advanced: The Flex Shorthandflex: 1 1 200px; expands to flex-grow, flex-shrink, and flex-basis respectively.
flex-grow: how much an item can expand relative to siblings.flex-shrink: how much an item can shrink when space is tight.flex-basis: the item’s default size before flexing.
Use Cases
- Responsive navigation bars with evenly spaced items.
- Vertical centering without absolute positioning.
- Card grids that adjust automatically to viewport size.
- Dynamic layouts without float or table hacks.
Still so complicated?
Think of flexbox as a smart row or column that automatically distributes space and alignment, saving you from writing complex manual CSS rules.
Summary
display: flexactivates flexbox layout mode.- It provides alignment, distribution, and resizing capabilities.
- Supports responsive and mobile-first design with minimal code.
- Perfect for modern UI components like navbars, cards, and toolbars.
Similar questions
Guides