Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including flexboxes with all npm packages installed. Try it out:

var flexboxes = require("flexboxes")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

flexboxes v0.9.0

CSS functional flexbox framework

flexboxes

flexboxes is a functional flexbox library and pure flexbox grid system designed for prototyping and production.

setup

Download flexboxes.css and load stylesheet

<link rel="stylesheet" href="flexboxes.css">

classes

display

  • .block-flex for flex
  • .inline-flex for inline-flex

flex-flow

flex-direction

  • .flow-east for row
  • .flow-west for row-reverse
  • .flow-south for column
  • .flow-north for column-reverse

flex-wrap

  • .flow-over for nowrap
  • .flow-wrap for wrap
  • .flow-warp for wrap-reverse

margin

Distribute free space via auto margins

  • .free-top
  • .free-left
  • .free-right
  • .free-bottom

order

  • .order-before
  • .order-after

align-items

  • .items-start
  • .items-end
  • .items-center
  • .items-baseline
  • .items-stretch

align-self

  • .self-center
  • .self-baseline
  • .self-stretch
  • .self-start
  • .self-end

justify-content

  • .just-start
  • .just-end
  • .just-center
  • .just-between
  • .just-around

align-content

  • .pack-start
  • .pack-end
  • .pack-center
  • .pack-between
  • .pack-around
  • .pack-stretch

flex

Shorthand classes supply common presets

  • .flex-initial for 0 1 auto aka shrinkable
  • .flex-auto for 1 1 auto aka flexible
  • .flex-none for none aka inflexible

Compose with grow shrink basis

flex-grow

  • .grow-0
  • .grow-1
  • .grow-2
  • .grow-3
  • .grow-4
  • .grow-5
  • .grow-6
  • .grow-8
  • .grow-7
  • .grow-9
  • .grow-10
  • .grow-11
  • .grow-12

flex-shrink

  • .shrink-0
  • .shrink-1
  • .shrink-2
  • .shrink-3
  • .shrink-4
  • .shrink-5
  • .shrink-6
  • .shrink-7
  • .shrink-8
  • .shrink-9
  • .shrink-10
  • .shrink-11
  • .shrink-12

flex-basis

  • .basis-0 0/12 grid
  • .basis-1 1/12 grid
  • .basis-2 2/12 grid
  • .basis-3 3/12 grid
  • .basis-4 4/12 grid
  • .basis-5 5/12 grid
  • .basis-6 6/12 grid
  • .basis-7 7/12 grid
  • .basis-8 8/12 grid
  • .basis-9 9/12 grid
  • .basis-10 10/12 grid
  • .basis-11 11/12 grid
  • .basis-12 12/12 grid
  • .basis-100vw
  • .basis-100vh
  • .basis-100vmax
  • .basis-100vmin
  • .basis-golden
  • .basis-content
  • .basis-auto

area

Some flexbugs are solvable via min or max width or height

  • .area-min sets both mins to 0 re: nesting
  • .area-max sets both maxes to 100%

Consider area.css for more

@media

These are breakpoint classes for responsive design.

portrait orientation only

  • block-flex@portrait
  • inline-flex@portrait
  • flow-over@portrait
  • flow-wrap@portrait
  • flow-warp@portrait

landscape orientation only

  • block-flex@landscape
  • inline-flex@landscape
  • flow-over@landscape
  • flow-wrap@landscape
  • flow-warp@landscape

examples

ryanve.github.io/flexboxes

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free