it looks like flex.scss was renamed to _flexbox.scss. This has broken our projects that are using webpack with sass-loader and doing

@import ~sass-flex-mixin/flex

The project-breaking happened spontaneously on our build server since version 1.0.2 is considered compatible with ^1.0.0.

Thanks for these awesome mixins!

Love this code! Thanks for sharing!

Quick question, but have you thought about setting default values for the mixins? For example:

// Flexbox "Flex" (shorthand)
// Values: <flex-grow> <flex-shrink> || <flex-basis>
// Default: 0 1 auto

@mixin flex($fg: 0, $fs: 1, $fb: auto) {
    -webkit-box-flex: $fg;
    -webkit-flex: $fg $fs $fb;
    -moz-flex: $fg $fs $fb;
    -ms-flex: $fg $fs $fb;
    flex: $fg $fs $fb;
}

By having the defaults defined for the mixin args, I was able to call like so:

.demoFlex{
    @include flex(1);
    background:#A9D1FE;
}

Whereas without the defaults, I get:

Syntax error: Mixin flex is missing argument $fs.

I'd be more than happy to do a PR if you think your code could benefit from default values. 👍

I have webpack in Laravel 6

webpack.mix.js

const mix = require('laravel-mix');

mix.react('resources/js/app.js', 'public/js');
mix.scripts([
    'public/js/app.js',
    'resources/js/includes/ral.js',
    'resources/js/includes/script.js'
],  'public/js/app.js')
	.sourceMaps()
	.version();
mix.sass('resources/sass/app.scss', 'public/css');

Then I have bootstrap, slick-carousel and sass-flex-mixin installed in node_modules folder and I import them in my app.scss

app.scss

@import '~bootstrap/scss/bootstrap';
@import '~slick-carousel/slick/slick';
@import '~slick-carousel/slick/slick-theme';
@import '~sass-flex-mixin/flex';
@import 'variables';
@import 'includes/fontello';
@import 'style';

Then in _style.scss I have

.mystyleinc { @include flexbox; }
.mystyleext { @extend %flexbox; }

As I understand from tests.css both styles should be compiled into code below

.flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }

But I have different output. For mystyleinc I see only 3 of 5 properties. And mystyleext is absolutely empty.

.mystyleinc {
  display: -webkit-box;
  display: -moz-flex;
  display: flex;
}

What is wrong?

helped a bunch!

why is -webkit-box-ordinal-group (ln 132) incremented the value by one, while the others don't?

I found this mixin file and while looking through it I noticed there was an error in the flex properties.

@mixin flex-wrap($value: nowrap) {
  // No Webkit Box fallback.
  -webkit-flex-wrap: $value;
  -moz-flex-wrap: $value;

  @if $value == nowrap {
    flex-wrap: none;
  } @else {
    flex-wrap: $value;
  }
}

The flex-wrap property has no value none. With that said the mixin can be condensed to a one liner since you have a default set.

@mixin flex-wrap($value: nowrap) {
  // No Webkit Box fallback.
  -webkit-flex-wrap: $value;
  -moz-flex-wrap: $value;
  flex-wrap: $value;
}

This isn't working in IE11. What is the fallback supposed to look like?

Current:

@mixin justify-content($value: flex-start) {
  // ...
}

// Shorter version:
@mixin flex-just($value: flex-start) { @include justify-content($value); }

Why not:

@mixin justify-content($value: flex-start) {
  // ...
}

// Shorter version:
@mixin flex-just($args...) { @include justify-content($args...); }

Hi,
Thank you for writing these mixins! I've found them very useful in my flexbox projects. I wondered if flex.scss should be named flex.scss to follow the SASS convention. I currently use bower to install the package and use bower-installer to rename the file with an underscore. It would be great if the file started with a "" by default.

Thoughts? Thanks again for the great set of mixins!

Can you please do this? If you can't do it can i upload it on my own bower repo for sass mixins (i'll add reference to your name, copyright and everything) because it's painful to download and insert manually from github into every new project :)

Here is my test-drive page for use with sass-flex-mixin
http://prettyminimal.com/flexbox/

After checking different browsers, it seem not to work properly on Internet Explorer 10 because it uses different flexbox properties.

From Microsoft's website:
https://msdn.microsoft.com/en-us/library/dn265027(v=vs.85).aspx

For Ie10 Use:
The -ms-flex-wrap property Instead of flex-wrap property
The -ms-flex-order and flex-order properties Instead of order property.
The -ms-flex-pack property Instead of justify-content property
The -ms-flex-align property Instead of align-items property
The -ms-flex-item-align property Instead of align-self property
The -ms-flex-line-pack property Instead of align-content property

Also there is an flexyboxes app, which generate proper code including IE10 http://the-echoplex.net/flexyboxes

[edit] I have checked scss flex mixins code and there are already -ms-flex- properties implemented, so now I don't know what's the reason of this issue.

I'm not sure if this was intentionally so but I work on a website still with a significant number of FF 22- visitors, so we'd need to add display: -moz-box; stuff to use this.

Will submit a pull request when I get around to it.

Latest on NPM is still at v1.0.0, lagging behind the repo a little

🍻 for the mixin!

The mixin is great! But you forgot the moz-box.

#38

@mixin flexbox {
display: -webkit-box;
display: -webkit-flex;
🔴display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}

@mixin inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
🔴display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}

@mixin justify-content($value: flex-start) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
🔴-moz-box-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
🔴-moz-box-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
🔴-moz-box-pack: justify;
} @else if $value == space-around {
-ms-flex-pack: center;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
🔴-moz-box-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}

@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
🔴-moz-box-align: start;
🔴-ms-grid-row-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
🔴-moz-box-align: end;
🔴-ms-grid-row-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
🔴-moz-box-align: $value;
🔴-ms-grid-row-align: $value;
}
-webkit-align-items: $value;
🔴-moz-align-items: $value;
align-items: $value;
}

And -ms-flex-wrap is nowrap not none

// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
🔴-ms-flex-wrap: nowrap;
} @else {
🔴 -ms-flex-wrap: $value;
}
flex-wrap: $value;

I notice the names of files have changed somewhat, suggesting that a new bower release is needed to get the latest code

It's an easy mistake to accidentally type out...

@include flex(1 0 auto);

But that doesn't actually work, as the mixin expects three separate parameters that must be comma separated. Like...

@include flex(1, 0, auto);

Is there a way to make Sass throw an error when commas are forgotten?

... instead of $value: row: https://github.com/mastastealth/sass-flex-mixin/blob/master/flex.scss#L118.

This would be solved by #15 anyway.

I really like your mixin collection, but I can't seem to get it to work in IE10. The mixin doesn't insert "display: -ms-flexbox" into the CSS, which means IE10 doesn't get it. When I hard code "display: -ms-flexbox" (without using the mixin) into an element's CSS, it works.
I'm using Compass 1.0.0.alpha.12 and Sass 3.4.2 .

Hi, the 1.0.1 release of this plugin isn't released to npm...

Some usage examples would be very valuable. Thanks!

Thanks for your great work on the mixins!

Would you like to perhaps add a license field to your bower.json and/or a quick note to the README?

Many people just scan for the words "license" and "MIT" for example when picking projects. :)