This library currently only contains an angular
directive for adding
flexbox properties that are configurable at runtime.
This library was generated with Angular CLI version 11.0.5.
npm install @mrclark/recyclables -g to install the library globally. In your
@NgModule decorator import the FlexibleDirective.
On any element add the attribute
recFlexible which will give default
flex-box functionality and brings with it 3 other properties
Note: Simply adding recFlexible to an element is equivalent to writing:
display: flex; justify-content: flex-start; align-items: start;
Important Note: The Recyclable FlexibleDirection adds the style properties inline, so changing these properties in the css file would require use defining the change !important
Recyclable is tree shakable!
Add attribute to element
<div recFlexible> centent </div>
Configure the direction, justification and alignment
<div recFlexible recDirection='column' recJustify='center' recAlign='center'> centent </div>
MDN Web Docs has extensive documentation on the flex-box layout model. To understand how it works refer to the documentation.