handy-flexbox

Handy flexbox CSS classes, for easier HTML layouts.

Installation

Include the handy-flexbox.css in your styles. There are multiple ways to get the CSS file:

NPM:
``
npm install handy-flexbox
`

Bower:
`
bower install dfernandez79/handy-flexbox
`

Download from GitHub:
`
curl -L -O https://raw.githubusercontent.com/dfernandez79/handy-flexbox/master/handy-flexbox.css
`

CSS Class Reference

$3

Class | Description
------------------ | -----------
flex-row | Container using display flex, and row direction.
inline-flex-row | Inline variation for flex-row.
flex-column | Container using display flex, and column direction.
inline-flex-column | Inline variation for flex-column.

$3

Class | Description
---------- | -----------
flex-auto | Uses flex: auto.
flex-none | Uses flex: none.
flex-grow | Uses flex: 1 0 auto (like auto, but doesn't shrink the item bellow the base width).

$3

Class | Description
--------------------- | -------------------------------
flex-align-center | Uses align-items: center.
flex-align-start | Uses align-items: flex-start.
flex-align-end | Uses align-items: flex-end.
flex-align-baseline | Uses align-items: baseline.

$3

Class | Description
-------------------------- | -------------------------------
flex-justify-start | Uses justify-content: flex-start.
flex-justify-end | Uses justify-content: flex-end.
flex-justify-center | Uses justify-content: center.
flex-justify-space-between | Uses justify-content: space-between.
flex-justify-space-around | Uses justify-content: space-around.
flex-wrap | Uses flex-wrap: wrap`