CSS functional flexbox framework
npm install flexboxesDownload 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
for flex
- .inline-flex for inline-flex$3
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
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 inflexiblegrow 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`