Reuse Flexbox Styles With A Sass Mixin
This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site. With variables and common defaults, this mixin will cover most alignment issues and replace the need for tables for all time. Need a column with each item evenly spaced but starting their alignment on the top? No problem! How about a row with the items evenly spaced out as well as equal spacing around the edges? We have you covered!
[00:01] As you can see here, we have your average form with some divs, with input wrapper classes. They're surrounding labels and inputs, labels and inputs. That's this clump here, this clump here, then we have these two clumps with a select and a label. They have a class of side by side.
[00:27] When we go to start styling, we're going to call out the input wrapper. Then we'll tell the input wrapper to go ahead and be display flex. We want each of these to have a flex direction of column. We want the labels to be on top of the inputs. We want the justify content to be set to space around.
[00:57] After that we're going to go ahead and select our side-by-side buddies, side by side. That's talking to again, these selects. The reason it's a side-by-side class is, you guessed it, I want them to sit side by side. I'll give them the same treatment of display flex. However, this time I want them to have a flex direction of row. Instead of justifying the content with space around, I want to justify the content with the space between.
[01:32] As you can see this is super simple form, super simple example. However, it can get really competitive saying display flex, flex direction, display flex, flex direction. This is where a flex mix-in can come in handy. You simply say @mixin and then you say whatever you're going to call it, which I like to call this flex container.
[01:56] After declaring flex container, you can then put some of the commonly used things inside of it, like obviously display flex will go in there. Next up we're going to have a flex direction, but instead of column I find that I most often use row. I like to set that. Then lastly I think space between is also a more commonly used attribute for justify content.
[02:22] Now I'm going to say instead of saying display flex, flex row, space between down here in my side by side, I can replace that entire chunk with include flex container. Now you'll see that we are using our flex container mix-in down here for side by side and full looking good.
[02:45] However, mix-ins don't stop there with their usefulness. In order to be able to use this mix-in for things like columns as well, we need to create some defaults. First we'll pass in direction. We'll set that direction as row for the default. Next up we'll want spacing. As I said before, I find space between to be one of the more commonly used spacings.
[03:12] Now I can go ahead and replace this with the direction variable. I can replace this with the spacing variable. Now when I want to set something other than a row and space between default, for instance with my input wrapper, I can say @includeflexcontainer. Then instead of a row, we're going to go ahead and pass in direction of column. Instead of space between, we'll say spacing of space around.
[03:52] There you have it. We are now using our flex container mix-in for two separate things and it's super reusable. Last note on this is that you can also pass in a null. Let's say I wanted to not just justify the content but also align the content. I wanted to say flex start, let's say. Not all of the things do I want as in this instant flex start to align. Sometimes I might.
[04:27] It might be really helpful to go ahead and say alignment. Create that alignment variable, but up here we don't make it a requirement. We set it to null. This way this line actually doesn't get assigned whenever you include it unless you say alignment whatever. Then it will actually pass that in here for this alignment variable.