🎯 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!
Top comments (0)