Flexbox Layout Explained

Answer

Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It provides powerful alignment and distribution capabilities.

Flexbox Axes

Container Properties

.container {
	display: flex; /* Enable flexbox */
	flex-direction: row; /* row | row-reverse | column | column-reverse */
	justify-content: center; /* Main axis alignment */
	align-items: center; /* Cross axis alignment */
	flex-wrap: wrap; /* wrap | nowrap | wrap-reverse */
	gap: 10px; /* Space between items */
}

justify-content (Main Axis)

.container {
	justify-content: flex-start; /* Items at start (default) */
	justify-content: flex-end; /* Items at end */
	justify-content: center; /* Items centered */
	justify-content: space-between; /* First at start, last at end */
	justify-content: space-around; /* Equal space around each */
	justify-content: space-evenly; /* Equal space everywhere */
}

align-items (Cross Axis)

.container {
	align-items: stretch; /* Fill container height (default) */
	align-items: flex-start; /* Align to top */
	align-items: flex-end; /* Align to bottom */
	align-items: center; /* Vertically center */
	align-items: baseline; /* Align text baselines */
}

Item Properties

.item {
	flex-grow: 0; /* How much to grow (default: 0 = don't grow) */
	flex-shrink: 1; /* How much to shrink (default: 1 = can shrink) */
	flex-basis: auto; /* Initial size before growing/shrinking */

	/* Shorthand */
	flex: 1; /* grow=1, shrink=1, basis=0 (equal sizing) */
	flex: 0 1 auto; /* default values */
	flex: 2 1 200px; /* grow=2, shrink=1, basis=200px */

	align-self: center; /* Override align-items for this item */
	order: 2; /* Change visual order */
}

Practical Examples

Center Anything

.centered-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

Navigation Bar

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
}

.nav-links {
	display: flex;
	gap: 1rem;
}

Card Grid (Responsive)

.card-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.card {
	flex: 1 1 300px; /* Grow, shrink, minimum 300px */
	max-width: 400px;
}

Holy Grail Layout

.layout {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.header {
	/* Fixed height */
}
.footer {
	/* Fixed height */
}

.main {
	flex: 1; /* Takes remaining space */
	display: flex;
}

.sidebar {
	width: 200px;
}
.content {
	flex: 1;
}

Equal Height Columns

.columns {
	display: flex;
}

.column {
	flex: 1;
	/* All columns same height automatically */
}

Flexbox vs Grid

Use Case	Flexbox	Grid
1D layout (row OR column)	✅ Best	Overkill
2D layout (row AND column)	Possible	✅ Best
Unknown item count	✅ Best	Works
Precise grid positioning	Difficult	✅ Best
Alignment	✅ Excellent	✅ Excellent

Common Patterns

/* Sticky footer */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main {
	flex: 1;
}

/* Input with button */
.input-group {
	display: flex;
}
.input-group input {
	flex: 1;
}
.input-group button {
	/* fixed width */
}

/* Media object */
.media {
	display: flex;
	gap: 1rem;
}
.media-image {
	width: 80px;
}
.media-content {
	flex: 1;
}

Key Points

• display: flex creates a flex container
• Main axis = flex-direction direction
• justify-content = main axis alignment
• align-items = cross axis alignment
• flex: 1 = grow to fill available space
• gap = modern way to add spacing
• Use Flexbox for 1D layouts, Grid for 2D