Learn CSS Flexbox in 10 Minutes
Updated
•2 min read
Flexbox is a powerful module in CSS that provides an efficient way to arrange elements in a container — even when their size is unknown or dynamic. Unlike traditional layouts that rely heavily on floats and positioning, Flexbox focuses on distributing space along a single axis (either horizontal or vertical) while allowing flexible alignment and spacing.
1. The Magical Property Flex
With Flexbox, you define a flex container and then control how its flex items behave inside it — including their size, order, and alignment.
With a parent container with class ‘container‘ and child items inside it. The magic starts with just setting the display to flex:
.container {
display: flex;
}
2. Flexbox Properties
Flex container properties:
| Property | Description | Example |
| display | Defines a flex container (flexorinline-flex) | display: flex; |
| flex-direction | Defines the direction of the main axis | flex-direction: row-reverse; |
| flex-wrap | Allows items to wrap onto multiple lines | flex-wrap: wrap; |
| flex-flow | Shorthand for flex-direction and flex-wrap | flex-flow: column wrap; |
| justify-content | Aligns items along the main axis | justify-content: space-between; |
| align-items | Aligns items along the cross-axis | align-items: center; |
| align-content | Aligns rows within the container when wrapping | align-content: space-around; |
Flex item properties:
| Property | Description | Example |
| order | Controls the order of the items | order: 2; |
| flex-grow | Defines how much a flex item can grow relative to others | flex-grow: 1; |
| flex-shrink | Defines how much a flex item can shrink relative to others | flex-shrink: 0; |
| flex-basis | Defines the initial size of a flex item before distributing space | flex-basis: 200px; |
| flex | Shorthand for flex-grow, flex-shrink, and flex-basis | flex: 1 0 100px; |
| align-self | Overrides align-items for an individual item | align-self: flex-end; |
3. Example of a Responsive Two-Column Layout
.container {
display: flex;
gap: 1rem;
}
.sidebar {
flex: 1;
}
.main {
flex: 3;
}
