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:

Also several optional attributes can be used...

| Attribute | Default | Description | |--------------|----------------|----------------------------------------------------------------------| | flexWrap | False (nowrap) | Can be true or false to toggle wrap/nowrap into the flex-flow style. | | flexJContent | 'flex-start' | Configures the justify-content style. | | flexAItems | 'stretch' | Configures the align-items style. | | flexAContent | 'stretch' | Configures the align-content style. |

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...

| Attribute | Default | Description | |------------|---------|------------------------------------------------------------| | flexOffset | '0%' | Configures the 'margin-left' style with a css size string. | | flexGrow | 0 | Takes in a number to configure the style flex-grow. | | flexShrink | 1 | Takes in a number to configure the style flex-shrink. | | flexASelf | null | Configures the style align-self. |