Flexbox, officially the CSS Flexible Box Layout Module, is designed to provide an efficient way to lay out, align, and distribute space among items in a container, even when their sizes are unknown or dynamic.
1. The Flex Container and Items
Flexbox works on a parent-child relationship:
- Flex Container: The parent element where you set
display: flex;. - Flex Items: The direct children of the Flex Container.
Once an element is a Flex Container, its children become Flex Items and follow Flexbox rules, ignoring their default display properties (e.g., a block element no longer takes up the full width).
.container {
display: flex; /* Turns the parent into a Flex Container */
/* Styles applied here control the overall flow and alignment */
}
.item {
/* Styles applied here control how the individual item behaves */
}
2. Properties on the Flex Container (Parent)
These properties control the direction, wrapping, and alignment of the items as a group.
A. Direction and Wrap
| Property | Value | Description |
flex-direction | row (default), column, row-reverse, column-reverse | Defines the main axis (the direction the items flow). |
flex-wrap | nowrap (default), wrap, wrap-reverse | Controls whether items stay on a single line or wrap onto multiple lines if they run out of space. |
flex-flow | Shorthand for flex-direction and flex-wrap. | flex-flow: row wrap; |
B. Alignment (The Crux of Flexbox)
Alignment is controlled along two axes: the Main Axis (defined by flex-direction) and the Cross Axis (perpendicular to the main axis).
| Property | Axis | Purpose |
justify-content | Main Axis (e.g., horizontal in row direction) | Distributes space between and around items. |
align-items | Cross Axis (e.g., vertical in row direction) | Aligns items along the line. |
align-content | Cross Axis (applies only when flex-wrap: wrap;) | Distributes space between lines when there is extra space in the container. |
| justify-content Values | align-items Values |
flex-start | flex-start |
flex-end | flex-end |
center | center |
space-between (equal space between items) | stretch (default: items stretch to fill the container height) |
space-around (equal space on both sides of items) | baseline |
space-evenly (equal space everywhere) |
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between; /* Pushes first item left, last item right */
align-items: center; /* Vertically centers all items */
height: 60px;
}
3. Properties on the Flex Items (Children)
These properties control how an individual item resizes or repositions itself within the Flex Container.
| Property | Shorthand Value | Description |
flex-grow | Unitless number (default 0) | Defines how much a flex item grows relative to the rest of the items when there is extra space. |
flex-shrink | Unitless number (default 1) | Defines how much a flex item shrinks relative to the rest of the items when there is too little space. |
flex-basis | Length unit (e.g., 100px, auto) | Defines the default size of the item before the container distributes remaining space. |
flex | Shorthand for grow, shrink, and basis. | flex: 1 1 auto; (default) or flex: 1; (common for equal distribution). |
align-self | Same as align-items values. | Overrides the container’s align-items value for this specific item. |
order | Integer (default 0) | Controls the visual order of items, regardless of their source order in the HTML. |
.sidebar {
flex: 1 1 200px; /* Grow: 1, Shrink: 1, Base width: 200px */
}
.main-content {
flex: 3 1 auto; /* Grows 3 times as much as the sidebar */
}
.last-item {
order: -1; /* Visually places this item first, even if it's last in HTML */
align-self: flex-end; /* Overrides align-items to push this item to the bottom */
}
