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%;
}
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;
}
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;
}
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)
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:
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)justify-content: space-around
will apply half-size spacing on both endsjustify-content: space-evenly
will apply even spacing between and around the child elementsThank you :-)
Π‘ongratulations π₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up π