Just place the flexbox.styl file into your project, then import it in your stylus file with @import 'flexbox' Each function tries to accept as many official values (according to the Flexbox standard), but does require some changes.
Browser support can be seen here: http://caniuse.com/#search=flex-box
flexbox(value)where value is either flex, or inline-flex.flex(value)value represent the setting of basis, grow and shrink, example:flex(25% 1 1)flex-basis(value)flex-grow(value)flex-shrink(value)flex-direction(value)valuecan be: row, row-reverse, column or column-reverseflex-wrap(value)Accepts the 3 options: nowrap, wrap, wrap-reverse- [
flex-flow(value)][flex-flow] Shortcut forflex-direction || flex-wrap. Example:flex-flow(row wrap) justify-content(value)valuecan be: start, end, center, space-bottom or space-aroundalign-content(value)valuecan be the same options as forjustify-content(value)align-items(value)valuecan be: start, end, stretch, center, baselinealign-self(value)accepts start, end, auto, center, baseline, stretchorder(value)accepts any positive number
This code supports the following browsers:
| Spec | Prefixed | Tweener |
|---|---|---|
| Opera 12.1+ | Safari 6.1+ | IE 10 |
| Chrome 29+ | iOS 7.1+ | |
| Firefox 28+ (current - 1) | ||
| Android Browser 4.4+ | ||
| IE 11+ |