CSS Flexbox

Learn how to use the Flexbox layout model to create flexible and responsive web layouts with CSS

What is CSS Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout module that makes it easier to design flexible and responsive layout structures without using float or positioning. It provides an efficient way to align and distribute space among items in a container, even when their size is unknown or dynamic.

Key Advantages of Flexbox:

Easier vertical and horizontal alignment
Ability to reorder elements without changing HTML
Responsive design without media queries for simple cases
Equal height columns without hacks
Flexible item sizing and distribution
Better support for responsive layouts

Flexbox Properties Reference

Property	Applies To	Description	Values
display	Container	Defines a flex container	flex, inline-flex
flex-direction	Container	Sets the direction of flex items	row, row-reverse, column, column-reverse
flex-wrap	Container	Controls whether items wrap	nowrap, wrap, wrap-reverse
justify-content	Container	Aligns items on the main axis	flex-start, flex-end, center, space-between, space-around, space-evenly
align-items	Container	Aligns items on the cross axis	stretch, flex-start, flex-end, center, baseline
align-content	Container	Aligns lines in multi-line flex containers	stretch, flex-start, flex-end, center, space-between, space-around
order	Items	Changes visual order of items	integer (default: 0)
flex-grow	Items	Ability to grow relative to others	number (default: 0)
flex-shrink	Items	Ability to shrink relative to others	number (default: 1)
flex-basis	Items	Default size before growing/shrinking	length, auto (default: auto)
align-self	Items	Overrides align-items for individual items	auto, stretch, flex-start, flex-end, center, baseline

Flexbox Concepts in Detail

Main Axis vs Cross Axis

Understanding the two axes is fundamental to using Flexbox effectively.

Main Axis - Defined by flex-direction

Cross Axis - Perpendicular to the main axis

justify-content works along the main axis

align-items works along the cross axis

Flex Container vs Flex Items

Flexbox has a parent-child relationship between container and items.

Container Properties - Apply to the parent element

Item Properties - Apply to the child elements

Any element can become a flex container

Direct children automatically become flex items

Flexible Sizing

Flex items can grow and shrink to fill available space.

flex-grow - How much an item can grow relative to others

flex-shrink - How much an item can shrink relative to others

flex-basis - Initial size before growing/shrinking

flex - Shorthand for grow, shrink, and basis

Alignment Control

Flexbox provides precise control over alignment in both directions.

justify-content - Main axis alignment

align-items - Cross axis alignment for single line

align-content - Cross axis alignment for multiple lines

align-self - Individual item alignment override

Best Practices for Flexbox

Layout & Responsive Design

Use Flexbox for one-dimensional layouts (rows OR columns)
Combine with CSS Grid for complex two-dimensional layouts
Leverage flex-wrap for responsive designs without media queries
Use flex-basis instead of width for more flexible items
Take advantage of the order property for responsive reordering

Common Mistakes to Avoid

Using too many nested flex containers unnecessarily
Forgetting to set flex-basis when using flex-grow
Overusing the order property which can affect accessibility
Not testing flexbox layouts in different browsers
Using Flexbox for everything when another layout method might be better

Browser Support & Fallbacks

Flexbox is supported in all modern browsers
Consider fallbacks for older browsers if needed
Use @supports feature queries for progressive enhancement
Test in various browsers to ensure consistent behavior
Be aware of minor rendering differences between browsers

Flexbox Implementation Example

Example Code

/* CSS Flexbox - Complete Guide */

/* Container Properties */
.flex-container {
  display: flex; /* or inline-flex */
  
  /* Direction and wrapping */
  flex-direction: row; /* row, row-reverse, column, column-reverse */
  flex-wrap: nowrap; /* nowrap, wrap, wrap-reverse */
  
  /* Shorthand for direction and wrap */
  flex-flow: row wrap; /* flex-direction + flex-wrap */
  
  /* Main axis alignment */
  justify-content: flex-start; /* flex-start, flex-end, center, space-between, space-around, space-evenly */
  
  /* Cross axis alignment */
  align-items: stretch; /* stretch, flex-start, flex-end, center, baseline */
  
  /* Multi-line alignment */
  align-content: stretch; /* stretch, flex-start, flex-end, center, space-between, space-around */
}

/* Item Properties */
.flex-item {
  /* Order of items */
  order: 0; /* Integer value, default is 0 */
  
  /* Ability to grow */
  flex-grow: 0; /* Unitless number, default is 0 */
  
  /* Ability to shrink */
  flex-shrink: 1; /* Unitless number, default is 1 */
  
  /* Default size before growing/shrinking */
  flex-basis: auto; /* length, auto, content, default is auto */
  
  /* Shorthand for grow, shrink, basis */
  flex: 0 1 auto; /* flex-grow, flex-shrink, flex-basis */
  
  /* Override container's align-items */
  align-self: auto; /* auto, stretch, flex-start, flex-end, center, baseline */
}

/* Practical Examples */

/* Basic flex container */
.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f8f9fa;
}

/* Centering content perfectly */
.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Card layout with equal heights */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px; /* Grow, shrink, basis */
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Responsive navigation */
.responsive-nav {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .responsive-nav {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Form layout */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .form-group {
    flex-direction: row;
    align-items: center;
  }
  
  .form-group label {
    flex: 0 0 120px; /* Don&apos;t grow, Don&apos;t shrink, fixed width */
    margin-right: 1rem;
  }
  
  .form-group input {
    flex: 1; /* Take remaining space */
  }
}

/* Holy Grail Layout */
.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail header,
.holy-grail footer {
  flex: 0 0 auto;
  padding: 1rem;
  background: #333;
  color: white;
}

.holy-grail main {
  display: flex;
  flex: 1;
}

.holy-grail .sidebar {
  flex: 0 0 250px;
  background: #f4f4f4;
  padding: 1rem;
}

.holy-grail .content {
  flex: 1;
  padding: 1rem;
}

/* Image gallery */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gallery-item {
  flex: 1 1 200px;
}

.gallery-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Pricing cards */
.pricing-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.pricing-card {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.pricing-header {
  padding: 2rem;
  background: #007bff;
  color: white;
  text-align: center;
}

.pricing-features {
  flex: 1; /* Push button to bottom */
  padding: 1.5rem;
}

.pricing-button {
  padding: 1rem;
  background: #28a745;
  color: white;
  text-align: center;
  text-decoration: none;
}

/* Flexbox patterns */

/* Evenly spaced items */
.even-spacing {
  display: flex;
  justify-content: space-between;
}

/* Vertical stack */
.vertical-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Media object */
.media-object {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.media-content {
  flex: 1;
}

/* Input group */
.input-group {
  display: flex;
}

.input-group input {
  flex: 1;
  border: 1px solid #ddd;
  padding: 0.5rem;
}

.input-group button {
  border: 1px solid #007bff;
  background: #007bff;
  color: white;
  padding: 0.5rem 1rem;
}

/* Masonry layout (approximation) */
.masonry {
  display: flex;
  flex-flow: column wrap;
  max-height: 1200px;
}

.masonry-item {
  width: 33.33%;
  margin-bottom: 0.5rem;
}

/* Sticky footer */
.sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sticky-footer main {
  flex: 1;
}

/* Debugging helpers */
.flex-debug {
  border: 1px dashed #ccc;
  padding: 0.5rem;
  margin: 0.25rem;
}

.flex-debug-container {
  border: 2px solid #007bff;
  padding: 1rem;
  background: rgba(0, 123, 255, 0.1);
}

.flex-debug-item {
  border: 2px solid #28a745;
  padding: 1rem;
  background: rgba(40, 167, 69, 0.1);
}

Ready to Try Flexbox?

Experiment with CSS Flexbox in our interactive editor. See how different properties work and practice creating flexible layouts.

< Previous Next >