flexbox-polyfills

Polyfills for flexbox

Module version of @richardtorres314's gist

Click here for original gist!

I am using these API's in one of my ReactJs project with a combination of style components.

Installation

npm install flexbox-polyfills or yarn add flexbox-polyfills

Usage:

Flexbox

1. Display Flexbox

Usage

import { flexbox } from 'flexbox-polyfills';
${flexbox()}

Flex

1. The 'flex' shorthand - applies to: flex items
2. The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties.
3. The flex property sets the flexible length on flexible items.
4. , initial, auto, or none

Usage

import { flex } from 'flexbox-polyfills';
${flex('auto')}

FlexDirection

1. Flex Flow Direction - applies to: flex containers
2. flexDirection function required flex direction as a parameter and return browser specific css.
3. flex direction properties like: row | row-reverse | column | column-reverse

Usage

import { flexDirection } from 'flexbox-polyfills';
${flexDirection('column-reverse')}

FlexWrap

1. Flex Line Wrapping - applies to: flex containers
2. flexWrap function required flex direction/wrap as a parameter and return browser specific css.
3. Wrap properties like: nowrap | wrap | wrap-reverse

Usage

import { flexWrap } from 'flexbox-polyfills';
${flexWrap('wrap')}

FlexFlow

1. Flex Direction and Wrap - applies to: flex containers
2. flexFlow function required flex direction/wrap as a parameter and return browser specific css.

Usage

import { flexFlow } from 'flexbox-polyfills';
${flexFlow('row-reverse wrap')}

Order

1. Flex grow factor - applies to: flex items
2. order function required order as a parameter and return browser specific css.

Usage

import { order } from 'flexbox-polyfills';
${order(-1)}

FlexGrow

1. Flex grow factor - applies to: flex items
2. flexShrink function takes required growing factor as a parameter and return browser specific css.

Usage

import { flexGrow } from 'flexbox-polyfills';
${flexGrow(1)}

FlexShrink

1. Flex shrink - applies to: flex item shrink factor
2. flexShrink function takes required shrinking as a parameter and return browser specific css.

Usage

import { flexShrink } from 'flexbox-polyfills';
${flexShrink(1)}

FlexBasis

1. Flex basis - the initial main size of the flex item
2. applies to: flex itemsnitial main size of the flex item
3. flexBasis function takes required width as a parameter and return browser specific css.

Usage

import { flexBasis } from 'flexbox-polyfills';
${flexBasis('100px')}

JustifyContent

1. Axis Alignment - applies to: flex containers
2. justifyContent function takes required alignment as a parameter and return browser specific css.
3. Alinment properties like: flex-start | flex-end | center | space-between | space-around

Usage

import { justifyContent } from 'flexbox-polyfills';
${justifyContent('flex-start')}

AlignContent

1. Packing Flex Lines - applies to: multi-line flex containers
2. alignContent function takes required alignment as a parameter and return browser specific css.
3. Alinments properties like: flex-start | flex-end | center | space-between | space-around | stretch

Usage

import { alignContent } from 'flexbox-polyfills';
${alignContent('flex-start')}

AlignItems

1. Cross-axis Alignment - applies to: flex containers
2. alignItems function takes required alignment as a parameter and return browser specific css.
3. Alinment properties like: flex-start | flex-end | center | baseline | stretch

Usage

import { alignItems } from 'flexbox-polyfills';
${alignItems('flex-start')}

align

1. Cross-axis Alignment - applies to: flex items.
2. align function takes required alignment as a parameter and return browser specific css.
3. Alinment properties like: auto | flex-start | flex-end | center | baseline | stretch

Usage

import { align } from 'flexbox-polyfills';
${alignSelf('flex-start')}

Thanks @richardtorres314 for awesome gist!

License

flexbox-polyfills is available under the MIT license. See the LICENSE file for more info.