/*Sharkie*/

Posted on Feb 1, 2020 • Edited on Jul 30, 2020

Flexin' like a Muscle - Advanced Flexbox

#flexbox #layout #development #css

So by this point, you should have a good grip of flexbox. You could maybe even call yourself a flexbox master. Go ahead, do it, I dare you.

Or you could do what I do and have my last 2 blog posts on Flexbox open in another tab. That's what all the masters do.

Let's take a wander on the flexbox road and take a gander at some of the Advanced techniques that will blow your mind!

Note: Please don't blow your mind if you have anemia, asthma, high blood pressure, a suspicious cloud following you, or would like to keep your brain in your head.

Let's Get it Started

....ha....let's get it started in here...

So if you haven't heard, flexbox is a way of laying out your web pages using the display: flex; property. You need a child and a parent element, and with those under your belt you can place pretty much any element on your page where ever you want it to be.

Advanced techniques take the simple parts of flexbox and combine them to help you make a gorgeous web page. And that's what we're going to attempt to cover today.

To be honest, I'm using this to help myself learn, so we're going on this journey together. And some of these might be simpler than you'd expect, but they count as advanced to me, so if you want to fight me bring it on.

Equal Height Columns

Look. It's hard to make columns stay at the same height. I've tried. It's a massive pain in my ass sometimes.

But what if we can do it... and have it be easy?

Take a peek at this:

.container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

Literally just make sure that flex-direction and align-items are set to their default values, set the container to flex, and bam. You've got some simple, equal height columns.

This is 100% going to be a life saver. I know it.

Grow on Hover

You know all those cool image sites that, on hover, let's the image grow?

FLEXBOX CAN DO THAT. And it can do it easily!

.items {
    flex: 1;
}

Simple enough, we set all the items to the default flex value of one (this can also be written as flex-grow - flex is the shorthand).

But now we do:

.items:hover {
    flex: 2;
}

Whichever item is being hovered grows by a value of 2, while the rest are stuck at 1. Which means it fills up double the available space, growing in front of your eyes! A lot of sites use this effect for maximum sleekness, and now we can all use it as well.

To be honest, I've tried to do this other ways before, but this just seems like the easiest and (hopefully) fool-proof way to go about it.

Input Add-ons

Input sizing is an absolute nuisance. Designing and coding forms is probably the bane of every web designer and developers existence. I have never heard of someone who actually enjoys working with forms.

Without flexbox, trying to append or prepend an element is basically impossible. But adding flexbox makes it so, so easy.

Let's say we want to append something to the beginning of our input. We have this as our HTML:

<div class="add-on">
    <input class="addon-field">
    <button class="addon-item">
</div>

Simple enough - the field is the input, while the item is whatever we are appending (in this case, a button).

Now the flexbox code?

.add-on {
    display: flex;
}

.addon-field {
    flex: 1;
}

And... that's it. You'll have a beautifully appended button, which you can style however you would like, added to your input field.

Isn't that just magical? Sorry, I'm still in awe about this.

Margin: auto

Apparently, there's a little known fact going around - flexbox and margin: auto; are actually soul mates. I know, I didn't believe in the relationship either, but I guess they've got it all figured out.

The question: How do you override justify-content? I want to have 3 items with the value flex-start, but 1 of the items I want on the far right. And I don't want to hard-code the margins, this is supposed to be flexible.

The solution: margin-left: auto; that bitch.

What this does is it let's the left margin of the item fill all available space on that side, pushing the item to the far right of the container. So if you set justify-content: flex-start;, and then add margin-left: auto; to the last item, the last item will end up on the right while the rest of the items are at the start of the container.

Did I explain that well? Because I don't think I did. But I tried my hardest.

For more reading on this, check out this link: https://medium.com/hackernoon/flexbox-s-best-kept-secret-bd3d892826b6#.byxqvyhah

Conclusion

So I only covered... what, 4 different techniques? There are so many more advanced flexbox techniques and tricks. So, so many.

These are some I think are useful in everyday coding. They're things I never knew before, and will probably implement into my normal websites (well, until something better comes along). Which is what flexbox does so well - it makes layout infinitely easier. And being a combination designer/developer - that's an actual godsend.

Happy coding, my dudes. <3

Top comments (7)

Juan F Gonzalez • Feb 1 '20 • Edited

Nice post! Flexbox is all love and life. Last year I saw it like these cool thing that I didn't how it worked and then went through Dave Geddes's course and haven't used any reference sheets anymore :D.
Great tips you mentioned here, they are quite useful. If you want another awe-inspiring, blow-your-mind kind of experience I recommend reading about flex-basis. Keep flexing! 💪
(I also got that Black Eyed Peas reference ha!)