DEV Community

loading...
Cover image for A Practical Cheat Sheet for CSS Flexbox (Containers)

A Practical Cheat Sheet for CSS Flexbox (Containers)

David R. Myers
Opinionated Software Engineer spreading positivity and inclusivity | Building @writewithocto | JS, TS, Vue, React, Ruby, Rails
Originally published at voracious.dev Updated on ・3 min read

I originally posted this Flexbox cheat sheet on Twitter, but the response was so positive that I decided to write it up here too! We will cover the (in my opinion) most common scenarios for Flexbox.

If you just want the cheat sheet (pictured above), you can download it here!

Table of Contents

  1. Horizontal Alignment
  2. Vertical Alignment
  3. Perfect (Vertical and Horizontal) Center Alignment
  4. Content Direction
  5. Content Wrapping
  6. Default Behavior

Horizontal Alignment

You can align items horizontally as a group or individually.

Anchor group to the center (horizontally)

.container {
  display: flex;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Anchor group to the right side

.container {
  display: flex;
  justify-content: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Add space around all items

.container {
  display: flex;
  justify-content: space-around;
}
Enter fullscreen mode Exit fullscreen mode

Add space between all items

.container {
  display: flex;
  justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

Vertical Alignment

You can align items vertically as a group.

Anchor group to the center (vertically)

.container {
  display: flex;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Anchor group to the top

.container {
  display: flex;
  align-items: flex-start;
}
Enter fullscreen mode Exit fullscreen mode

Anchor group to the bottom

.container {
  display: flex;
  align-items: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Perfect (Vertical and Horizontal) Center Alignment

You can combine selectors to get your desired layout. Perfect centering is a breeze with Flexbox.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Content Direction

You can change the overall content flow (column or row), and you can even change the arrangement of content.

Reverse the flow of content (horizontally)

.container {
  display: flex;
  flex-direction: row-reverse;
}
Enter fullscreen mode Exit fullscreen mode

Flow content vertically instead of horizontally

.container {
  display: flex;
  flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

Reverse the flow of content (vertically)

.container {
  display: flex;
  flex-direction: column-reverse;
}
Enter fullscreen mode Exit fullscreen mode

Content Wrapping

By default, all items are put on a single line.

.container {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

Wrap content to next lines (flow down)

.container {
  display: flex;
  flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

Wrap content to previous lines (flow up)

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}
Enter fullscreen mode Exit fullscreen mode

Default Behavior

The default behavior of Flexbox will...

  • Treat the container as block (full width)
  • Left align all items
  • Stretch each item's height to fit the container
  • Fit all items on a single line
.container {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

Thanks for taking the time to check this out! If you think something is missing or you just want to say hello, please leave a comment below! ✌️

Discussion (0)