flex: basis-size and full flex shorthand support #118

wants to merge 3 commits into


None yet
3 participants

buschtoens commented Aug 10, 2012

New translations!

basis-size now works with a width / height hack.

flex now works as complete as possible. It supports all shorthand syntax versions defined in MDN and interprets <'flex-grow'> and <'flex-basis'>. We can't support <'flex-shrink'> due to technical limitations of the old specifications.

New properties, that are still untranslated:

  • align-content
  • algin-self
  • flex-shrink
  • flex-wrap
  • justify-content
@@ -20,9 +20,6 @@ align-content()
vendor('align-self', arguments, only: webkit official)

buschtoens Aug 10, 2012


Moved down to translated section.

+ // obsolete
+ width: basis
+ height: basis

buschtoens Aug 10, 2012


width or height get replaced with width / height: auto !important in flex-direction.


  • It's a hack.
  • Possible width or height values get overwritten. But that isn't too bad, since one should not use width or height in FlexBox. flex is prefered.
  • You have to define flex-direction. Otherwise your page is filled with squares. Besides that you should always define flex-direction to be more explicit.


  • It works! The page looks exactly the same in new and obsolete browsers.
  • It's transitionable / animateable, too!

@buschtoens buschtoens referenced this pull request Aug 14, 2012


display box #23


tj commented Aug 14, 2012

anyone have comments on this? I haven't fooled with the flex-box stuff much yet, last time I checked it was pretty buggy in general


buschtoens commented Aug 15, 2012

Can I use FlexBox? (Dark green: obsolete and/or buggy, Light green: new)

The obsolete model is relatively well supported (still buggy in some browsers). The new one isn't, but will be in the future and is the definitive way to go.

But of course, I'd like to hear further opinions on this!


caseywebdev commented Aug 22, 2012

I think you'll need to add @import 'flex' to lib/nib/index.styl. I cloned your repo and once I made that change it worked fine.


buschtoens commented Aug 22, 2012

Yup, you're right. I didn't add this file to the commit. Do you want to PR or shall I do it?


caseywebdev commented Aug 22, 2012

I just created one at #126

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment