🎯 20 Useful Flexbox CSS Snippets You'll Use Again and Again

Flexbox is one of the most powerful layout tools in CSS. In this guide, I'll be covering 20 useful CSS snippets for utilising Flexbox effectively. It'll include common scenarios and lots of tips n' tricks.

Let's get started!

📌 Anatomy of a Flexbox Rule

Before we dive in, let’s break down a Flexbox rule:

.container {
  display: flex; /* Defines a flex container */
  justify-content: center; /* Aligns items horizontally */
  align-items: center; /* Aligns items vertically */
}

• Selector (.container): Targets the element.
• Property (display: flex): Turns it into a flex container.
• Values (center, space-between, etc.): Adjust the layout.

💡 Top Tip: When in doubt, add outline: 1px solid red; to see what's happening!

1. Center Anything (Literally)

No more margin: auto tricks—this centers anything inside a flex container.

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
}

2. Space Out Items Evenly

Want equal spacing between items? Use justify-content: space-between.

.container {
  display: flex;
  justify-content: space-between;
}

3. Wrap Items to the Next Line

Allows items to wrap when they exceed the container width.

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

This is great for creating responsive columns without the need for extra media queries.

4. Make a Sticky Footer

Ensure your footer sticks to the bottom when there's little content.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.footer {
  margin-top: auto;
}

5. Add 3 Items per Row

A common scenario involves adding a certain number of items per row, such as 3 images per row for a gallery.
To do this, just create a parent container and then set the width of the elements within to a percentage. For 3 items, it would be 33%, for 4 items it would be 25% and so forth.

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 70vw;
    justify-content: center;
}

.container img {
    width: calc(33.333% - 10px); /* Three images per row */
    height: auto;
}

6. Gap Property Support in Flexbox

Modern browsers now support the gap property in Flexbox layouts, eliminating the need for margins between items.

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

7. Flex-grow

You can use fractional values with flex-grow to create more nuanced distributions of space.

.container {
  display: flex;
}

.item-primary {
  flex-grow: 2; /* Gets twice as much extra space */
}

.item-secondary {
  flex-grow: 1; /* Gets normal amount of extra space */
}

.item-minimal {
  flex-grow: 0.5; /* Gets half as much extra space */
}

8. Align Items to the Bottom

Great for chat bubbles or sticky elements.

.bottom-align {
  display: flex;
  align-items: flex-end;
}

9. Reverse Column Order

Flip the order of items without touching the HTML.

.reverse {
  display: flex;
  flex-direction: column-reverse;
}

10. Equal-Width Flex Items

Make all child elements take up equal space.

.equal {
  display: flex;
}
.equal > * {
  flex: 1;
}

11. Center Align Items

You can ensure the contents in the container stay center-aligned along the cross-axis by setting align-items to center.

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

12. Make One Item Grow, Others Stay Fixed

Perfect for layouts with sidebars or main content.

.grow {
  display: flex;
}
.grow > .main {
  flex: 1;
}

13. Align Item to End of Row

You can also align an item to the end of a row by setting the margin-left property to auto.

.container {
  display: flex;
  flex-direction: row;
}

.item-third {          
  margin-left: auto;
}

14. Prevent Items from Shrinking

Prevents items from shrinking when the container size changes. To ensure the items wrap to the next line, add the flex-wrap property also.

.item {
  flex-shrink: 0;
  flex-wrap: wrap;
}

15. Align Content When Wrapping

Controls the alignment of flex items when they wrap to a new line.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

16. Wrap-reverse

If you'd like to reverse the order of the items and also ensure that the items wrap too, just set flex-wrap to wrap-reverse.

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

17. Align One Specific Item Differently

Overrides alignment for a specific flex item.

.item {
  align-self: flex-end;
}

18. Controlling Flex Item Growth Precisely

Using auto margins on flex items creates space between groups of items without extra wrapper elements. This is perfect for creating navigation bars with separated sections.

.navbar {
  display: flex;
  flex-direction: row;
}

.logo {
  margin-right: auto; /* Pushes everything else to the right */
}

.nav-links {
  /* These will be pushed to the right side */
}

19. Ordering Items in Responsive Layouts

The order property can rearrange flex items without changing your HTML structure. This is especially useful for responsive designs.

.container {
  display: flex;
}

.sidebar {
  order: 2; /* Will appear second visually */
}

.main-content {
  order: 1; /* Will appear first visually */
}

20. Align to End of Column

You can align an item to the end of a column by setting margin-top to auto. This is useful for sidebar layouts, for instance.

.container {
  display: flex;
  flex-direction: column;
}

.item-third {          
  margin-top: auto;
}

Follow Me for More Tips

If you want to get more resources like this, be sure to follow me on X/Twitter where I provide more resources like this. :-)

Got Any Other Tips to Share?

Thanks for reading! I hope that you've found this resource useful. What are your thoughts? Do you have any other Flexbox tips that you'd like to share? Be sure to let me know in the comments section below.

These snippets are super useful for common scenarios that you'll encounter as a developer. Flexbox is an incredibly powerful CSS layout tool for your toolkit. Copy these snippets, tweak them as needed, and use these to start building awesome layouts.

Thanks for reading!