flexboxes

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

npm install flexboxes

@import 'node_modules/flexboxes/main';

classes

display

• .flex
• .flex-item
• .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 0/12 grid
• .flex-1 1/12 grid
• .flex-2 2/12 grid
• .flex-3 3/12 grid
• .flex-4 4/12 grid
• .flex-5 5/12 grid
• .flex-6 6/12 grid
• .flex-7 7/12 grid
• .flex-8 8/12 grid
• .flex-9 9/12 grid
• .flex-10 10/12 grid
• .flex-11 11/12 grid
• .flex-12 12/12 grid

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

portrait

• .portrait-flex
• .portrait-flex-item
• .portrait-inline-flex
• .portrait-flex-wrap
• .portrait-flex-nowrap
• .portrait-flex-wrap-reverse

landscape

• .landscape-flex
• .landscape-flex-item
• .landscape-inline-flex
• .landscape-flex-wrap
• .landscape-flex-nowrap
• .landscape-flex-wrap-reverse

development

npm start

inspirations

• basscss-flexbox
• flexboxgrid

flexpress yo' self