flexboxes

flexboxes is a functional flexbox utility library and pure flexbox grid system. It offers a hybrid between other frameworks. It is designed for both prototyping and production.

setup

• For prototyping or codepen you can get any version from https://unpkg.com/flexboxes
• For production you can npm install flexboxes and import into your CSS bundle.

@import 'node_modules/flexboxes/main';

classes

display

• .flex
• .inline-flex

flex-direction

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse

flex-wrap

• .flex-wrap
• .flex-nowrap
• .flex-wrap-reverse

distribute free space

• .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

• .justify-start
• .justify-end
• .justify-center
• .justify-between
• .justify-around

align-content

• .content-start
• .content-end
• .content-center
• .content-between
• .content-around
• .content-stretch

size control

• .flex-min re: nesting
• .flex-max

flex presets

• .flex-golden
• .flex-initial
• .flex-auto
• .flex-none

flex shorthand

• .flex-0
• .flex-1
• .flex-2
• .flex-3
• .flex-4
• .flex-5
• .flex-6
• .flex-7
• .flex-8
• .flex-9
• .flex-10
• .flex-11
• .flex-12

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

@media

These are breakpoint classes for responsive design.

portrait orientation only

• flex@portrait
• inline-flex@portrait
• flex-wrap@portrait
• flex-nowrap@portrait
• flex-wrap-reverse@portrait

landscape orientation only

• flex@landscape
• inline-flex@landscape
• flex-wrap@landscape
• flex-nowrap@landscape
• flex-wrap-reverse@landscape

examples

balanced grid

<div class="flex">
  <div class="flex-auto">item</div>
  <div class="flex-auto">item</div>
  <div class="flex-auto">item</div>
</div>

wrapping grid

<div class="flex flex-wrap">
  <div class="basis-4">grid item</div>
  <div class="basis-4">grid item</div>
  <div class="basis-4">grid item</div>
  <div class="basis-4">grid item</div>
  <div class="basis-4">grid item</div>
</div>

responsive wrapping

<div class="flex flex-wrap@portrait">
  <div class="flex-auto basis-6">1</div>
  <div class="flex-auto basis-6">2</div>
  <div class="flex-auto basis-6">3</div>
  <div class="flex-auto basis-6">4</div>
</div>

development

npm install
npm start

inspirations

• basscss-flexbox
• flexboxgrid

flexpress yo' self