DEV Community

Cover image for A Practical Cheat Sheet for CSS Flexbox (Containers)
David R. Myers
David R. Myers

Posted on • Edited on • Originally published at voracious.dev

12

A Practical Cheat Sheet for CSS Flexbox (Containers)

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! ✌️

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay