CSS Flexbox

Master CSS Flexbox layout for creating flexible, responsive layouts with easy alignment and distribution of elements.

CSS Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system that makes it easy to design flexible and responsive layouts. It's particularly useful for aligning and distributing space among items in a container.

What is Flexbox?

Flexbox is a layout mode that provides an efficient way to:

Align elements vertically and horizontally
Distribute space within a container
Reorder elements visually
Create responsive layouts without media queries (in many cases)

Flex Container

To use Flexbox, you first define a flex container:

.container {
  display: flex; /* or inline-flex */
}

Flex Direction

The flex-direction property defines the direction of the flex items:

.container {
  display: flex;
  
  /* Row (default) - horizontal left to right */
  flex-direction: row;
  
  /* Row reversed - horizontal right to left */
  flex-direction: row-reverse;
  
  /* Column - vertical top to bottom */
  flex-direction: column;
  
  /* Column reversed - vertical bottom to top */
  flex-direction: column-reverse;
}

Justify Content

The justify-content property aligns items along the main axis:

.container {
  display: flex;
  
  /* Start of container */
  justify-content: flex-start; /* Default */
  
  /* End of container */
  justify-content: flex-end;
  
  /* Center of container */
  justify-content: center;
  
  /* Space between items */
  justify-content: space-between;
  
  /* Space around items */
  justify-content: space-around;
  
  /* Equal space around items */
  justify-content: space-evenly;
}

Align Items

The align-items property aligns items along the cross axis:

.container {
  display: flex;
  
  /* Stretch to fill container (default) */
  align-items: stretch;
  
  /* Start of cross axis */
  align-items: flex-start;
  
  /* End of cross axis */
  align-items: flex-end;
  
  /* Center of cross axis */
  align-items: center;
  
  /* Baseline alignment */
  align-items: baseline;
}

Flex Wrap

The flex-wrap property controls whether flex items wrap to multiple lines:

.container {
  display: flex;
  
  /* No wrapping (default) */
  flex-wrap: nowrap;
  
  /* Wrap to multiple lines */
  flex-wrap: wrap;
  
  /* Wrap in reverse */
  flex-wrap: wrap-reverse;
}

Align Content

The align-content property aligns multiple lines of flex items:

.container {
  display: flex;
  flex-wrap: wrap;
  
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch;
}

Flex Items Properties

Flex Grow

Controls how much a flex item grows relative to others:

.item {
  flex-grow: 1; /* Takes up available space */
}

.item-double {
  flex-grow: 2; /* Takes twice as much space */
}

Flex Shrink

Controls how much a flex item shrinks:

.item {
  flex-shrink: 1; /* Can shrink (default) */
}

.no-shrink {
  flex-shrink: 0; /* Won't shrink */
}

Flex Basis

Sets the initial size of a flex item:

.item {
  flex-basis: 200px; /* Initial width */
  flex-basis: 25%; /* Percentage of container */
  flex-basis: auto; /* Based on content (default) */
}

Flex Shorthand

Combine grow, shrink, and basis:

.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
  flex: 0 0 200px; /* grow shrink basis */
  flex: auto; /* 1 1 auto */
}

Align Self

Override align-items for a specific flex item:

.item {
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: stretch;
  align-self: baseline;
}

Order

Change the visual order of flex items:

.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }
/* Items display in order: item2, item1, item3 */

Practical Examples

Centering Elements

<!DOCTYPE html>
<html>
<head>
<style>
  .center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
  }
  
  .centered-box {
    background-color: #3498db;
    color: white;
    padding: 20px;
    border-radius: 8px;
  }
</style>
</head>
<body>
  <div class="center-container">
    <div class="centered-box">Perfectly Centered!</div>
  </div>
</body>
</html>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

Card Layout

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

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

Holy Grail Layout

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

.header, .footer {
  background-color: #333;
  color: white;
  padding: 1rem;
}

.content {
  display: flex;
  flex: 1;
}

.sidebar {
  flex: 0 0 200px;
  background-color: #f0f0f0;
}

.main {
  flex: 1;
  padding: 2rem;
}

Flexbox vs Grid

Flexbox - One-dimensional (row OR column)
Grid - Two-dimensional (rows AND columns)

Use Flexbox for:

Navigation bars
Card layouts
Centering elements
Distributing space

Use Grid for:

Complex page layouts
Two-dimensional arrangements
Magazine-style layouts

Common Patterns

Equal Height Columns

.columns {
  display: flex;
}

.column {
  flex: 1; /* All columns equal width */
  padding: 20px;
}

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

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

.footer {
  /* Stays at bottom */
}

Best Practices

Flexbox Tips

Use Flexbox for one-dimensional layouts
Combine with Grid for complex layouts
Use gap property for spacing between items (modern browsers)
Remember: flex-direction changes what "main axis" and "cross axis" mean
Use flex: 1 for equal-width responsive items
Flexbox works great for component-level layouts
Test with different screen sizes

Browser Support

Flexbox has excellent browser support. Use vendor prefixes for older browsers if needed:

.container {
  display: -webkit-flex;
  display: flex;
}

Debugging Flexbox

Tools for debugging Flexbox layouts:

Browser DevTools - Highlight flex containers and items
Firefox DevTools - Has a dedicated Flexbox inspector
Chrome DevTools - Shows flex properties in the Styles panel

Master Flexbox and you'll be able to create responsive layouts quickly and efficiently!

What is Flexbox?

Flexbox is a layout mode that provides an efficient way to:

Align elements vertically and horizontally
Distribute space within a container
Reorder elements visually
Create responsive layouts without media queries (in many cases)

Flex Container

To use Flexbox, you first define a flex container:

.container {
  display: flex; /* or inline-flex */
}

Flex Direction

The flex-direction property defines the direction of the flex items:

.container {
  display: flex;
  
  /* Row (default) - horizontal left to right */
  flex-direction: row;
  
  /* Row reversed - horizontal right to left */
  flex-direction: row-reverse;
  
  /* Column - vertical top to bottom */
  flex-direction: column;
  
  /* Column reversed - vertical bottom to top */
  flex-direction: column-reverse;
}

Justify Content

The justify-content property aligns items along the main axis:

.container {
  display: flex;
  
  /* Start of container */
  justify-content: flex-start; /* Default */
  
  /* End of container */
  justify-content: flex-end;
  
  /* Center of container */
  justify-content: center;
  
  /* Space between items */
  justify-content: space-between;
  
  /* Space around items */
  justify-content: space-around;
  
  /* Equal space around items */
  justify-content: space-evenly;
}

Align Items

The align-items property aligns items along the cross axis:

.container {
  display: flex;
  
  /* Stretch to fill container (default) */
  align-items: stretch;
  
  /* Start of cross axis */
  align-items: flex-start;
  
  /* End of cross axis */
  align-items: flex-end;
  
  /* Center of cross axis */
  align-items: center;
  
  /* Baseline alignment */
  align-items: baseline;
}

Flex Wrap

The flex-wrap property controls whether flex items wrap to multiple lines:

.container {
  display: flex;
  
  /* No wrapping (default) */
  flex-wrap: nowrap;
  
  /* Wrap to multiple lines */
  flex-wrap: wrap;
  
  /* Wrap in reverse */
  flex-wrap: wrap-reverse;
}

Align Content

The align-content property aligns multiple lines of flex items:

.container {
  display: flex;
  flex-wrap: wrap;
  
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch;
}

Flex Items Properties

Flex Grow

Controls how much a flex item grows relative to others:

.item {
  flex-grow: 1; /* Takes up available space */
}

.item-double {
  flex-grow: 2; /* Takes twice as much space */
}

Flex Shrink

Controls how much a flex item shrinks:

.item {
  flex-shrink: 1; /* Can shrink (default) */
}

.no-shrink {
  flex-shrink: 0; /* Won't shrink */
}

Flex Basis

Sets the initial size of a flex item:

.item {
  flex-basis: 200px; /* Initial width */
  flex-basis: 25%; /* Percentage of container */
  flex-basis: auto; /* Based on content (default) */
}

Flex Shorthand

Combine grow, shrink, and basis:

.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
  flex: 0 0 200px; /* grow shrink basis */
  flex: auto; /* 1 1 auto */
}

Align Self

Override align-items for a specific flex item:

.item {
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: stretch;
  align-self: baseline;
}

Order

Change the visual order of flex items:

.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }
/* Items display in order: item2, item1, item3 */

Practical Examples

Centering Elements

<!DOCTYPE html>
<html>
<head>
<style>
  .center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
  }
  
  .centered-box {
    background-color: #3498db;
    color: white;
    padding: 20px;
    border-radius: 8px;
  }
</style>
</head>
<body>
  <div class="center-container">
    <div class="centered-box">Perfectly Centered!</div>
  </div>
</body>
</html>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

Card Layout

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

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

Holy Grail Layout

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

.header, .footer {
  background-color: #333;
  color: white;
  padding: 1rem;
}

.content {
  display: flex;
  flex: 1;
}

.sidebar {
  flex: 0 0 200px;
  background-color: #f0f0f0;
}

.main {
  flex: 1;
  padding: 2rem;
}

Flexbox vs Grid

Flexbox - One-dimensional (row OR column)
Grid - Two-dimensional (rows AND columns)

Use Flexbox for:

Navigation bars
Card layouts
Centering elements
Distributing space

Use Grid for:

Complex page layouts
Two-dimensional arrangements
Magazine-style layouts

Common Patterns

Equal Height Columns

.columns {
  display: flex;
}

.column {
  flex: 1; /* All columns equal width */
  padding: 20px;
}

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

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

.footer {
  /* Stays at bottom */
}

Best Practices

Flexbox Tips

Use Flexbox for one-dimensional layouts
Combine with Grid for complex layouts
Use gap property for spacing between items (modern browsers)
Remember: flex-direction changes what "main axis" and "cross axis" mean
Use flex: 1 for equal-width responsive items
Flexbox works great for component-level layouts
Test with different screen sizes

Browser Support

Flexbox has excellent browser support. Use vendor prefixes for older browsers if needed:

.container {
  display: -webkit-flex;
  display: flex;
}

Debugging Flexbox

Tools for debugging Flexbox layouts:

Browser DevTools - Highlight flex containers and items
Firefox DevTools - Has a dedicated Flexbox inspector
Chrome DevTools - Shows flex properties in the Styles panel

Master Flexbox and you'll be able to create responsive layouts quickly and efficiently!

CSS Flexbox

On this page

CSS Flexbox

On this page