fxFlex API

The fxFlex directive should be used on elements within a fxLayout container and identifies the resizing of that element within the flexbox container flow. This is FlexBox's API for positioning elements in horizontal or vertical stacks.

This directive is the most powerful, smartest directive within the flex-layout API. Flexbox element resizing leverages three (3) features:

• flex-grow: defines how much a flexbox item should grow if there's space available
• flex-shrink: defines how much a flexbox item should shrink if there is not enough space available.
• flex-basis: defines the initial size of a flexbox item.

Note that the resizing occurs along the main-axis of the layout and maybe affected by the fxLayoutAlign options.

Developer's seeking details on FlexBox should review CSS-Tricks - A Guide to FlexBox.

Flex-Layout supports two (2) usages of the fxFlex directive: short-form & long-form.

• The long-form enables the developer to specify the grow, shrink, and basis values inline.
• fxFlex="1 1 52%"
• fxFlex="3 3 calc(15em + 20px)"
• fxFlex="1 1 auto"
• The short-form enables developers to specify only the flex-basis and uses defaults for the shrink and grow options: (default values == 1).
• fxFlex
• fxFlex=""
• fxFlex="2 2 calc(10em + 10px);"
• fxFlex="102px"

Note the above examples are using static values. To use runtime expressions, developers should use the box-notation to specify 1-way DataBind (to an expression). E.g. [fxFlex]="twoColumnSpan".

When the Angular compiler builds an instance of the FlexDirective, it initializes the

@Input('fxFlex') set(val) {....} 

with the static value of "". fxFlex is the same/equivalent as fxFlex="". And this empty string value is internally interpreted (by the FlexDirective) and instruction to assign an inline element-styling of

flex: 1 1 0.000000001px

... assuming the default values of shrink and grow have not been overridden.

A more detailed usage might be:

<div fxFlex fxShrink="0" fxGrow="2"></div>

which would result in an inline styling of

flex : 2 0 0.000000001px

flex-basis Values

The flex-basis values can be pixels, percentages, calcs, or none

---

Known Issues with fxFlex

CanIuse.com reports and tracks many browsers issues using FlexBox; especially with IE browsers and Column stacking layouts. Developers should consult the Known Issues and the Resources sections.