flexboxes

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

setup

Download flexboxes.css and load stylesheet

``html

`

- Browse releases or the latest release
- Codepens can link unpkg
- Dependers can npm install flexboxes and @import via node_modules
- Deprecated classes are in deprecated.css

classes

$3


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

$3

- Compose flex-direction flex-wrap
- Default is row nowrap

$3

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

$3

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

$3

Distribute free space via auto margins

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

$3


- .order-before
- .order-after

$3

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

$3

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

$3

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

$3

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

$3

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

$3


- .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

$3

- .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

$3

- .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

$3

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

$3

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