https://github.com/ixrock/flexbox

CSS library for easier work with flex boxes
https://github.com/ixrock/flexbox

css flexbox grid-layout layout sass

Last synced: 28 days ago
JSON representation

CSS library for easier work with flex boxes

• Host: GitHub
• URL: https://github.com/ixrock/flexbox
• Owner: ixrock
• Created: 2016-08-26T17:32:01.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T15:39:31.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T05:36:45.268Z (7 months ago)
• Topics: css, flexbox, grid-layout, layout, sass
• Language: CSS
• Homepage: https://ixrock.github.io/flexbox/docs/
• Size: 959 KB
• Stars: 25
• Watchers: 2
• Forks: 6
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Flexbox + css variables = ❤

Learn flex boxes as is: classes just reflects css-properties!

Super small & easy: only **~3Kb** (minified version).

## Install

`yarn add flex.box`

`npm install flex.box --save`

`bower install flex.box --save`

## Quick cheatsheet

```css

.flex

    [.inline.auto.column.reverse.wrap.center.fullsize.gaps]

    [.justify-(flex-start|center|flex-end|space-around|space-between)] /** justify-content **/

    [.align-(flex-start|center|flex-end|stretch|baseline)] /** align-items **/

    [.content-(flex-start|center|flex-end|space-around|space-between|stretch)] /** align-content **/

.flex > .box

    [.first.last.grow[-fixed].nogrow.noshrink]

    [.self-(flex-start|center|flex-end|stretch|baseline)]  /** align-self **/

    [.center.top.bottom.left.right]  /** margin **/

    

.flex[.grid-(1-12)] /** grid size **/

    > [.col-(1-12)] /** column size */

```

## API docs and live examples

https://ixrock.github.io/flexbox/docs/