Control direction with flex-direction (row, column, reverse)
Align items along main axis with justify-content
Align items along cross axis with align-items
Handle wrapping with flex-wrap
Control spacing with gap
Use flex item properties: flex-grow, flex-shrink, flex-basis
Override alignment with align-self and reorder with order
Introduction to Flexbox
Flexbox (Flexible Box Layout) is a one-dimensional layout system perfect for arranging items in rows or columns. It excels at distributing space, aligning content, and handling dynamic sizing. Flexbox is ideal for navigation bars, card layouts, toolbars, and any interface where items need flexible arrangement.
Apply display: flex to a container to make its direct children flex items, gaining access to powerful alignment and distribution properties.
display: flex - Creating a Flex Container
Apply display: flex to transform an element into a flex container. Direct children automatically become flex items.
/* Create flex container */
.container {
display: flex;
}
/* All direct children become flex items */
/* Inline flex container */
.inline-flex {
display: inline-flex;
}
/* Container behaves as inline element, children are flex items */
/* Example: Navigation bar */
nav {
display: flex;
}
nav a {
padding: 1rem;
}
/* Links automatically arrange in a row */
flex-direction - Main Axis Direction
Control whether flex items flow in rows (horizontal) or columns (vertical) with flex-direction.
/* Horizontal (default) */
flex-direction: row;
/* Items flow left to right */
/* Horizontal reversed */
flex-direction: row-reverse;
/* Items flow right to left */
/* Vertical */
flex-direction: column;
/* Items flow top to bottom */
/* Vertical reversed */
flex-direction: column-reverse;
/* Items flow bottom to top */
/* Practical examples */
/* Horizontal navigation */
.nav {
display: flex;
flex-direction: row;
}
/* Vertical sidebar menu */
.sidebar {
display: flex;
flex-direction: column;
}
/* Mobile-first: column on small, row on large */
.layout {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.layout {
flex-direction: row;
}
}
justify-content - Main Axis Alignment
Distribute items along the main axis using justify-content. Controls horizontal spacing in rows, vertical spacing in columns.
/* Start of container (default) */
justify-content: flex-start;
/* End of container */
justify-content: flex-end;
/* Center of container */
justify-content: center;
/* Space between items, none at edges */
justify-content: space-between;
/* Space around items, half-space at edges */
justify-content: space-around;
/* Equal space between and around items */
justify-content: space-evenly;
/* Practical examples */
/* Centered navigation */
.nav {
display: flex;
justify-content: center;
}
/* Spread buttons across footer */
.footer-buttons {
display: flex;
justify-content: space-between;
}
/* Right-aligned toolbar */
.toolbar {
display: flex;
justify-content: flex-end;
}
/* Card layout with even spacing */
.card-row {
display: flex;
justify-content: space-evenly;
}
align-items - Cross Axis Alignment
Align items along the cross axis with align-items. Controls vertical alignment in rows, horizontal alignment in columns.
/* Start of cross axis */
align-items: flex-start;
/* Center of cross axis */
align-items: center;
/* End of cross axis */
align-items: flex-end;
/* Stretch to fill container (default) */
align-items: stretch;
/* Align to text baseline */
align-items: baseline;
/* Practical examples */
/* Vertically centered navigation */
.nav {
display: flex;
align-items: center;
height: 60px;
}
/* Card with centered content */
.card {
display: flex;
flex-direction: column;
align-items: center;
}
/* Toolbar with icon alignment */
.toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Form row with label alignment */
.form-row {
display: flex;
align-items: baseline;
gap: 1rem;
}
flex-wrap - Multi-Line Layouts
By default, flex items squeeze onto one line. Use flex-wrap to allow items to wrap onto multiple lines.
/* No wrapping (default) */
flex-wrap: nowrap;
/* All items on single line, may overflow */
/* Wrap onto multiple lines */
flex-wrap: wrap;
/* Items wrap to next line as needed */
/* Wrap in reverse direction */
flex-wrap: wrap-reverse;
/* Items wrap but lines stack in reverse */
/* Practical examples */
/* Responsive card grid */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 300px; /* Grow, shrink, min 300px */
}
/* Tag cloud */
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Product gallery */
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
gap - Spacing Between Items
The gap property creates consistent spacing between flex items without margins.
/* Single value: same gap in all directions */
gap: 1rem;
/* Two values: row-gap column-gap */
gap: 1rem 2rem;
/* Individual properties */
row-gap: 1rem;
column-gap: 2rem;
/* Practical examples */
/* Navigation with spacing */
.nav {
display: flex;
gap: 2rem;
}
/* Card grid */
.cards {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
/* Button group */
.button-group {
display: flex;
gap: 0.5rem;
}
/* Form layout */
.form {
display: flex;
flex-direction: column;
gap: 1rem;
}
Flex Item Properties - grow, shrink, basis
Control how individual flex items grow, shrink, and size themselves with flex-grow, flex-shrink, and flex-basis.
/* flex-grow: Ability to grow */
flex-grow: 0; /* Default: don't grow */
flex-grow: 1; /* Grow to fill available space */
flex-grow: 2; /* Grow twice as much as items with flex-grow: 1 */
/* flex-shrink: Ability to shrink */
flex-shrink: 1; /* Default: can shrink */
flex-shrink: 0; /* Never shrink below flex-basis */
/* flex-basis: Initial size */
flex-basis: auto; /* Default: use content size */
flex-basis: 200px; /* Start at 200px */
flex-basis: 50%; /* Start at 50% of container */
/* Shorthand: flex */
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
flex: 0 0 200px; /* No grow, no shrink, 200px fixed */
flex: 1 1 auto; /* Grow and shrink from content size */
/* Practical examples */
/* Flexible layout: sidebar + main */
.sidebar {
flex: 0 0 250px; /* Fixed 250px sidebar */
}
.main {
flex: 1; /* Main grows to fill space */
}
/* Equal-width columns */
.column {
flex: 1; /* All columns equal width */
}
/* One column twice as wide */
.column-wide {
flex: 2;
}
/* Responsive cards */
.card {
flex: 1 1 300px;
/* Grow, shrink, but min 300px */
}
align-self & order - Item Overrides
Override container alignment for individual items with align-self, and change visual order with order.
/* align-self: Override align-items for one item */
align-self: auto; /* Default: inherit from parent */
align-self: flex-start;
align-self: center;
align-self: flex-end;
align-self: stretch;
/* order: Change visual order */
order: 0; /* Default */
order: 1; /* Appears after items with lower order */
order: -1; /* Appears before items with higher order */
/* Practical examples */
/* Special item alignment */
.nav {
display: flex;
align-items: center;
}
.nav .logo {
align-self: flex-start;
}
/* Move item to end */
.container {
display: flex;
}
.move-to-end {
order: 1;
}
/* Reverse item order visually */
.item:nth-child(1) { order: 3; }
.item:nth-child(2) { order: 2; }
.item:nth-child(3) { order: 1; }
/* Responsive reordering */
@media (max-width: 768px) {
.sidebar {
order: 2; /* Sidebar after main on mobile */
}
.main {
order: 1;
}
}
Key Takeaways
One-dimensional: Flexbox arranges items in rows OR columns, not both simultaneously
display: flex: Turns element into flex container; direct children become flex items
flex-direction: row (horizontal), column (vertical), with -reverse variants
justify-content: Aligns items along main axis (horizontal in rows, vertical in columns)
align-items: Aligns items along cross axis (vertical in rows, horizontal in columns)
flex-wrap: wrap allows multi-line layouts; nowrap (default) keeps single line
gap: Creates spacing between items; cleaner than margins
flex-grow: How much item grows relative to siblings (0 = don't grow)
flex-shrink: How much item shrinks relative to siblings (0 = don't shrink)
flex-basis: Initial size before growing/shrinking; can be px, %, or auto