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.

fxFlex Attribute Usages

The fxFlex directive supports two (2) usages: 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".

fxFlex Options

The flex-basis values can be pixels, percentages, calcs, em, vw, vh, or known aliases.

• fxFlex
• fxFlex=""
• fxFlex="2 2 calc(10em + 10px);"
• fxFlex="102px"
• fxFlex="auto"

Here is an example of a non-trivial layout using fxFlex options:


Flex-basis aliases are accepted shorthand terms used to easily specify Flexbox stylings. Here are the industry mappings:

alias	Equivalent CSS
grow	{flex: 1 1 100%}
initial	{flex: 0 1 auto}
auto	{flex: <grow> <shrink> 100%}
none	{flex: 0 0 auto}
nogrow	{flex: 0 1 auto}
noshrink	{flex: 1 0 auto}

Empty fxFlex Values

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 values of shrink and grow have not been overridden from the default 1.

Another usage with distinct grow and shrink values:

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

would result in an inline styling of

flex : 2 0 0.000000001px

Additional fxFlex Stylings

fxFlex also auto-assign additional stylings, dependent upon the fxFlex value used and the layout, main-axis direction:

• box-sizing : border-box
• max-width: when direction == row and use fixed sizes+shrink or 0%
• max-height: when direction == column and use fixed sizes or 0%
• min-width: when direction == row and use fixed sizes+grow or 0%
• min-height: when direction == column and use fixed sizes+grow or 0%

When a parent fxLayout container changes flow-direction, the fxFlex directive will automatically update the element's inline-styling with corrected stylings.

---

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.