Flexbox is a CSS technique for easily building one-dimensional layouts (a single direction, horizontal or vertical). It is used in most UI layouts, such as navigation bars, card lists, and centered content.
1. Flexbox Basics
.container {
display: flex; /* Child elements become flex items */
}
- Flex Container: The parent element with
display: flexapplied - Flex Item: The direct children of the Flex Container
[Container]
┌─────────────────────────────────────────┐
│ [Item 1] [Item 2] [Item 3] │
└─────────────────────────────────────────┘
→ Main Axis (default: horizontal)
2. Direction (flex-direction)
.container {
flex-direction: row; /* Default: horizontal (left → right) */
flex-direction: row-reverse; /* Horizontal, reversed (right → left) */
flex-direction: column; /* Vertical (top → bottom) */
flex-direction: column-reverse; /* Vertical, reversed (bottom → top) */
}
3. Main-Axis Alignment (justify-content)
Aligns items along the main axis.
.container {
justify-content: flex-start; /* Default: align to the start */
justify-content: flex-end; /* Align to the end */
justify-content: center; /* Center alignment */
justify-content: space-between; /* First and last pinned, the rest spaced evenly */
justify-content: space-around; /* Equal space on both sides of each item */
justify-content: space-evenly; /* All gaps identical */
}
4. Cross-Axis Alignment (align-items)
Aligns items along the cross axis.
.container {
align-items: stretch; /* Default: fill the cross axis */
align-items: flex-start; /* Align to the start */
align-items: flex-end; /* Align to the end */
align-items: center; /* Center alignment (often used for vertical centering) */
align-items: baseline; /* Align by text baseline */
}
5. Wrapping (flex-wrap)
.container {
flex-wrap: nowrap; /* Default: no wrapping (items may overflow) */
flex-wrap: wrap; /* Move to the next line when overflowing */
flex-wrap: wrap-reverse; /* New lines are added above */
}
6. Spacing (gap)
.container {
gap: 16px; /* Same gap for rows and columns */
gap: 20px 10px; /* Row gap 20px, column gap 10px */
row-gap: 20px; /* Row gap only */
column-gap: 10px; /* Column gap only */
}
7. Flex Item Properties
flex-grow / flex-shrink / flex-basis
.item {
flex-grow: 1; /* Share of the remaining space to take (default: 0) */
flex-shrink: 1; /* Rate of shrinking when space is tight (default: 1) */
flex-basis: auto; /* Base size (default: auto) */
/* Shorthand property */
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
flex: 0 0 200px; /* Fixed size 200px (neither grows nor shrinks) */
}
order
.item-1 { order: 2; } /* Displayed second */
.item-2 { order: 1; } /* Displayed first */
.item-3 { order: 3; } /* Displayed third */
align-self
.item {
align-self: center; /* Only this item centered on the cross axis */
align-self: flex-end; /* Only this item at the end of the cross axis */
}
8. Common Patterns
Perfect Centering
.center {
display: flex;
justify-content: center; /* Horizontal center */
align-items: center; /* Vertical center */
height: 100vh;
}
Navigation Bar
.navbar {
display: flex;
justify-content: space-between; /* Logo on the left, menu on the right */
align-items: center;
padding: 0 20px;
}
Example Files
Open flexbox.html in the examples/ folder to see the navigation bar, the three-column card layout, and vertical centering.
Assignment
Read assignment.md and build a responsive card list.