Flexbox (Flexible Box Layout)
The Flexible Box Layout Module, commonly referred to as Flexbox, is a one-dimensional layout system designed to distribute space among items in a container and align them, making it easy to build complex, responsive components like navigation bars, galleries, and form groups.
Unlike the traditional Normal Flow, Flexbox provides predictable behavior for adjusting content based on the screen size and available space.
1. Core Concepts: Container and Items
Flexbox works through a simple parent-child relationship:
- The Flex Container (Parent): The element where you declare
display: flex;. This parent element defines the Flex Formatting Context for its direct children. - The Flex Items (Children): The direct children of the Flex Container. They become flexible and are controlled by the properties set on the parent.
Remember that Flexbox is one-dimensional. It manages layout along either a row or a column, but not both simultaneously. For two-dimensional control (rows and columns together), you should use CSS Grid.
2. The Two Axes
The behavior of Flexbox is defined by two perpendicular axes, whose orientation is determined by the flex-direction property.
A. The Main Axis
- This is the primary axis along which Flex Items are laid out.
- The property
justify-contentcontrols spacing and alignment along the Main Axis.
B. The Cross Axis
- This axis is perpendicular to the Main Axis.
- The property
align-itemscontrols spacing and alignment along the Cross Axis.
If flex-direction is set to row (default), the Main Axis runs horizontally (left-to-right), and the Cross Axis runs vertically (top-to-bottom).
3. Flex Container Properties (The Parent)
These properties control the overall layout and positioning of the Flex Items.
3.1. display
Turns the element into a Flex Container.
.container {
display: flex; /* Creates a block-level flex container */
/* OR */
display: inline-flex; /* Creates an inline-level flex container */
}
3.2. flex-direction
Establishes the Main Axis and its direction.
| Value | Direction |
|---|---|
row (Default) | Horizontal, left-to-right (Main Axis). |
row-reverse | Horizontal, right-to-left. |
column | Vertical, top-to-bottom (Main Axis). |
column-reverse | Vertical, bottom-to-top. |
3.3. justify-content (Main Axis Alignment)
Defines how space is distributed between and around items along the Main Axis.
| Value | Description |
|---|---|
flex-start (Default) | Items are packed toward the start line. |
flex-end | Items are packed toward the end line. |
center | Items are centered along the line. |
space-between | Items are evenly distributed; first item is at the start, last is at the end. |
space-around | Items have equal space around them (leading to half-space at the ends). |
space-evenly | Items have completely equal space between, before, and after them. |
3.4. align-items (Cross Axis Alignment)
Defines how items are aligned along the Cross Axis (perpendicular to the Main Axis).
| Value | Description |
|---|---|
stretch (Default) | Items stretch to fill the container (respecting min/max width/height). |
flex-start | Items are aligned to the start of the Cross Axis. |
flex-end | Items are aligned to the end of the Cross Axis. |
center | Items are centered on the Cross Axis. |
baseline | Items are aligned based on their content's baseline. |
3.5. flex-wrap
By default, all items try to fit on a single line. If items must wrap onto multiple lines, use flex-wrap.
| Value | Description |
|---|---|
nowrap (Default) | Items will shrink to fit one line. |
wrap | Items will wrap onto a new line if space is insufficient. |
wrap-reverse | Items wrap in reverse order. |
The properties flex-direction and flex-wrap can be combined into the shorthand property: flex-flow.
Example: .container { flex-flow: row wrap; }
4. Flex Item Properties (The Child)
These properties control individual items within the container.
4.1. order
By default, items are displayed in source order. order allows you to change the visual sequence. Lower numbers appear first.
.item-a { order: 2; }
.item-b { order: 1; } /* Item B will appear before Item A */
4.2. flex-grow
A number that determines how much the item will grow to take up extra available space in the container. Default is 0.
4.3. flex-shrink
A number that determines how much the item will shrink relative to other items if there is not enough space. Default is 1.
4.4. flex-basis
The initial size of the item before any growing or shrinking occurs. It can be a length (100px) or a percentage (25%). Default is auto.
4.5. flex (Shorthand)
The shorthand for flex-grow, flex-shrink, and flex-basis.
.item {
flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto (default) */
/* OR: flex: 1; (equivalent to flex: 1 1 0) */
}
4.6. align-self
Overrides the align-items value set on the parent container for a single flex item.
/* Parent has align-items: flex-start; */
.item-special {
align-self: center; /* This item will be centered vertically */
}
Interactive Flexbox Demo
Use the CSS tab to experiment with the parent properties (flex-direction, justify-content, align-items) and the item properties (flex-grow, flex-basis).