flexboxes

0.9.0 • Public • Published

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

Package Sidebar

Install

npm i flexboxes

Weekly Downloads

34

Version

0.9.0

License

0BSD

Unpacked Size

23.9 kB

Total Files

10

Last publish

Collaborators

  • ryanve