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="https://github.com/ryanve/flexboxes/blob/master/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

• .flex-inline for inline-flex
• .flex-block for 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-all frees all
• .free-top frees top
• .free-bottom frees bottom
• .free-left frees left
• .free-right frees right
• .free-north frees block-start
• .free-south frees block-end
• .free-west frees inline-start
• .free-east frees inline-end

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-fade for 0 1 auto aka shrinkable
• .flex-fame for 1 0 auto aka growable
• .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

Responsive orientation classes are available for flex-flow and display classes. Append @portrait or @landscape to these classes to limit them to that orientation. This affords layouts that flow or wrap differently based on viewport orientation or layouts that only flex in one orientation. Try the #fitting example in both portrait and landscape to see how it adapts. You can do this on a phone by rotating the phone or on a computer by resizing the browser window.

class="flex-block flow-west@portrait flow-north@landscape"

portrait

• flow-east@portrait
• flow-west@portrait
• flow-south@portrait
• flow-north@portrait
• flow-over@portrait
• flow-wrap@portrait
• flow-warp@portrait
• flex-inline@portrait
• flex-block@portrait

landscape

• flow-east@landscape
• flow-west@landscape
• flow-south@landscape
• flow-north@landscape
• flow-over@landscape
• flow-wrap@landscape
• flow-warp@landscape
• flex-inline@landscape
• flex-block@landscape

examples

ryanve.github.io/flexboxes