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