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

• 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

display

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

flex-flow

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

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