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`

.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

`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

ryanve / flexboxes