# flexbox-polyfills > Polyfills for flexbox Latest version **1.0.2** (published 2018-01-21) · MIT license · 0 weekly downloads ## Install ```sh npm install flexbox-polyfills pnpm add flexbox-polyfills yarn add flexbox-polyfills bun add flexbox-polyfills ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2018-01-21 | | First published | 2018-01-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Abhishek Thorat | | Maintainers | abhishek_thorat | | Keywords | polyfill, flexbox | ## Links - npm: https://www.npmjs.com/package/flexbox-polyfills - Repository: https://github.com/AbhishekThorat/flexbox-polyfills - Homepage: https://github.com/AbhishekThorat/flexbox-polyfills#readme - Issues: https://github.com/AbhishekThorat/flexbox-polyfills/issues - npm.io page: https://npm.io/package/flexbox-polyfills ## Recent versions - 1.0.2 (latest) — 2018-01-21 - 1.0.1 — 2018-01-21 - 1.0.0 — 2018-01-21 ## README # 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
    4.  ##### 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. --- _Source: https://npm.io/package/flexbox-polyfills · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._