DEV Community

Luis A.
Luis A.

Posted on

Flexbox Magic: Design Patterns to Boost Your Projects πŸš€

What's up, fellow web wizards? πŸ§™β€β™‚οΈ Ready to flex your flexbox skills and create some magical layouts? Today, we're gonna dive into three flexbox design patterns that'll make your layouts pop like a unicorn's bubblegum πŸ¦„πŸ¬. And the best part? Two of 'em don't even need media queries! So, let's get this flexbox party started! πŸŽ‰

Design Pattern 1: Even Stevens Columns

First up, let's talk about Even Columns. It's like sharing pizza slices πŸ• with your friends – everybody gets an equal piece, no matter how much they can eat! Even if the content within each column is different, they'll all be the same size. Ain't that cool?



.even-columns {
  display: flex;
}

.even-columns > * {
  flex-basis: 100%;
}

Enter fullscreen mode Exit fullscreen mode

Just slap on display: flex to the container, and it's flexin' time. Then, use flex-basis on each direct child to make 'em all equal. Set it to 100%, and you're good to go! Easy peasy lemon squeezy. πŸ‹

Design Pattern 2: Grid-ish Goodness

Next up is Grid-ish! It's like a grid that went on a diet – it behaves like one, but without the carbs (aka CSS Grid Layout module)!


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

.gridish > * {
  flex-basis: calc((100% / 3) - 20px);
  margin: 10px;
}

Enter fullscreen mode Exit fullscreen mode

First, we make it a flex container with display: flex and tell it to wrap using flex-wrap: wrap. Then, use flex-basis on each direct child to make 'em equally wide. We use calc() to do the math – just divide the width into three parts, and subtract 20px to account for the margin. Easy as pie! πŸ₯§

Design Pattern 3: Holy Grail Layout, Batman!

Introducing the legendary Holy Grail Layout! It's got a header, footer, and three columns – a classic combo, just like Batman and Robin. πŸ¦Έβ€β™‚οΈ



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

.holy-grail-main {
  display: flex;
  flex: 1;
}

.holy-grail-sidebar {
  flex-basis: 200px;
}

.holy-grail-content {
  flex: 1;
  margin: 0 20px;
}

Enter fullscreen mode Exit fullscreen mode

Start with display: flex on the container, and use flex-direction: column to stack 'em vertically. Add min-height: 100vh to fill the viewport.

Wrap the main content with .holy-grail-main, and make it flex too! Use flex: 1 to grab all the space it can.

Give the sidebar a fixed width with flex-basis, and use margin on the main content to create a neat gutter between columns. Voilà! 🎩

Bonus Tip: Space Jam πŸ€

Wanna space elements evenly like a pro? Use justify-content: space-between on the container, and you'll be jammin' like Michael Jordan in Space Jam! πŸ€πŸŒŒ

And that's a wrap, folks! With these flexbox design patterns in your toolbox, you'll be slayin' layouts like a boss! πŸ•ΆοΈ So go ahead and flex your newfound powers, create some mesmerizing designs, and make your projects shine like the stars! ✨

Ready for more flexbox fun? Keep exploring, and may the flex be with you! 🌠

Top comments (3)

Collapse
 
attilalb profile image
attilalb

Great one!

Just to add some bonus tip to your bonus tip:
Depending on your use case, you actually have three similar but slightly different options:

  1. justify-content: space-between will spread the flex children with even space between them pushing them to the edges of the parent container (minus the padding if applied)
  2. justify-content: space-around will apply half-size spacing on both ends
  3. justify-content: space-evenly will apply even spacing between and around the child elements
Collapse
 
artydev profile image
artydev

Thank you :-)

Collapse
 
fruntend profile image
fruntend

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up πŸ‘