FlexWrap an Angular 2 Wrapper For Flexbox

I recommend this guide to familiarize yourself with the meanings to flexbox css and a better understanding on when you would want to use these directives. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Usage

To create a flexbox container use the "flex" attribute directive. To create a flexbox item inside a flexbox container use the "flexItem" attribute directive.

Example Use

<div flex flexJContent="center">
  <div flexItem flexGrow=2>
    Test
  </div> <!-- flexbox Item -->
</div> <!-- flexbox container -->

The flex Attribute Directive

The flex attribute is used to define how to set 'flex-flow'.
By default flex sets itself as 'row'. Optionally it can be configured to equal either:

• 'row'
• 'column'
• 'row-reverse'
• 'column-reverse'
• 'initial'
• 'inherit'

Also several optional attributes can be used...

The flexItem Attribute Directive

The flexItem attribute is used to set the min-width, max-width and flex-basis styles. By default it is set to 'auto' but will take in any css string for sizing, such as '10px'.

Also several optional attributes can be used...