Flex Layout Attribute (FLA)

Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — layout and self.

$3

Items distributed in a row and centered within container:
`` html

1

2

3

`

#### Try live — interactive demo

$3

- Dedicated HTML attribute — separated layout markup, semantic & concise syntax.
- Beyond grids — ratio relationships, element sizes based on a scale.
- Rapid prototyping — design in browser, quick iterations, no need to write CSS for layout.
- Solid base — ease to extend and customize.

$3

Several quick start options are available:

* Download the latest release
* Clone the repo: git clone https://github.com/StefanKovac/flex-layout-attribute.git.
* Install with npm: npm install flex-layout-attribute.

$3

1) Insert flex-layout-attribute.min.css in document HEAD:
`html

`

2) Add layout attribute to html elements:
`html

...

`

$3

1. Clone the repo: git clone https://github.com/StefanKovac/flex-layout-attribute.git.
2. Install dependencies: npm run setup.
3. Build FLA: gulp or set watcher: gulp watch`

$3

Interactive demo, documentation and snippets — http://progressivered.com/fla/


*
###### License
FLA is released under the MIT license.