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

Flex containers

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.

Item size

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

Item alignment

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.

Item justification

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