1.1.0 • Published 8 years ago
handy-flexbox v1.1.0
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-flexboxbower install dfernandez79/handy-flexboxDownload from GitHub:
curl -L -O https://raw.githubusercontent.com/dfernandez79/handy-flexbox/master/handy-flexbox.cssCSS 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 |