The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Reuse Flexbox Styles With A Sass Mixin

Reuse Flexbox Styles With A Sass Mixin

4:54
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!
Watch this lesson now
Avatar
egghead.io

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!

Avatar
Chester

When passing in parameters to a sass mixin, can't you just pass in the parameters in order without specifying the parameters name itsself?

For example:

@include flex-container(column, space-around);
Avatar
Alyssa

Ordering or variables, you must have one

Yes! That totally works too and I use it all the time.

The only issue is, let's say I wanted a row but I wanted it to have space-around. I would have to either repeat the default and say

@include flex-container(row, space-around);

or I could just use the variable and not repeat the row style, by saying

@include flex-container($spacing: space-around);

Either are totally valid!

In reply to Chester
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?