Flexbox - old and new

Code Feedback
1

Hi,

Trying to learn CSS flexbox so I can use it in my personal portfolio project. However, when is comes to browser support I get a little confused.

I cite this example from stackoverflow: Cross Browser support for CSS Flexbox:
.foo { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; }

What am I exactly looking at here? From my research, and please correct me if I’m wrong, it looks like -webkit-box;, -moz-box;, -ms-flexbox; & -webkit-flex; are all just different syntaxes used by older browsers?

If I want to use flexbox and make it supported across browsers, it looks like I will need to write each individual CSS property: value; in five different syntaxes?

Say I’m using the property:value; flex-direction: row;, will I need to write it for -webkit-box;, -moz-box;, -ms-flexbox; & -webkit-flex; ? Do these different syntaxes all use the equivalent flex-direction: row; combination or does flex-direction: row; only work with certain syntaxes?

Yes, I’m a little confused :confused:

If anyone can bring light to this topic or point me in the direction of resources that do, I would be jubilant.

2

Yeah flexbox isn’t supported without vendor prefixes yet (and on older Safari versions, it barely works ugh). So you do need to write it that way if you want maximum support. The good thing is that you can use Autoprefixer which will directly do all the work for you. If you’re on Codepen, you can enable it in CSS options. If you’re working locally, you should probably use gulp to do it on compile, or manually do it online.

There’s also Flexibility which is a polyfill for older browsers, but it should still be accompanied by Autoprefixer. So yeah, use autoprefixer.

Also, consider looking at Sitepoint’s article for Sass mixins, as @JacksonBates has suggested below.

Relevant info from the article:

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

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.container {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}
3

Similar to what @imtoobose says, you can also use Sass to simplify your CSS with vendor prefixes. Look into ‘mixins’:

http://sass-lang.com/guide

4

@imtoobose @JacksonBates Thanks to both of you guys. Wow… I didn’t know what I was getting into. Ok, I’ll use Codepen for now however I would prefer to install Autoprefixer on Sublime Text. Then I run into suggestions that I might as well install postCSS which includes Autoprefixer and a bunch of other goodies. In order to do this, I need to install Gulp. Gulp install looks like it requires some knowledge of command line which at this point I have zero. How would you suggest installing Autoprefixer or postCSS so that I can use it with Sublime Text. Is this stuff over my head? Yes. But this is how I role.

5

I used to use the Autoprefixer plugin for Sublime which gives you a single command to prefix your file. From what I remember though, it doesn’t give the same results as the regular Autoprefixer, and that’s why I ended up using the online tool before moving to Gulp…

If you want an automated build, install node and use npm to install gulp-cli globally. Then I can give you a gulpfile + package.json for it, which should be simple because I’ll just need to delete a bunch of lines from the ones I use for front end work.

Otherwise, Codepen or Sublime is good enough.

6

@imtoobose Autoprefixer online works superb! Thanks for the tip. Now I feel I can move forward with my project and stop banging my head against my laptop screen:laughing:

7

@imtoobose Sounds great. I think I’ll go ahead and use Autoprefixer online so I can focus on my Personal Portfolio project. I’ve had zero introduction to gulp, node.js, etc. Hoping to use these tools soon.

8

Don’t know about you guys but flex-box is working without a browser prefix on Chrome Ubuntu.