@db3dev/flexwrap
by db3dev | v1.0.2
Angular 2 Wrapper For Flexbox and Nativescript Containers
npm i --save @db3dev/flexwrap

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.