Flexy Box

A simple lightweight cross browser flex grid framework written in SCSS. Take the guess work out of CSS3 Flex Box and use Flexy Box to create modern fluid page layouts.

Live Demo

https://flexybox-docs.netlify.com

Feature Roadmap

• offsets
• non-prefix version

Supported Browsers (CSS)

Flexy Box CSS is prefixed and tested for the following browsers. If are loading the scss directly (webpack, gulp, etc) then you will need to ensure that you create a task to auto prefix.

• Chrome *
• Firefox *
• Safari (flex wrap does not currently work in safari due to webkit bug)*
• Edge *
• IE 10 & 11
• iOS *

CodePen

http://codepen.io/johnnyazee/pen/AXoWkm

Development

Prerequisites

npm install -g yarn

You must be running nodejs version => 6.3.0

yarn install
yarn build

A little help & inspiration:

• https://css-tricks.com/using-flexbox/
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://github.com/angular/material