JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 13
  • Score
    100M100P100Q51469F
  • License 0BSD

CSS functional flexbox framework

Package Exports

  • flexboxes

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (flexboxes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

classes

display

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

flex-flow

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