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 directive is the smartest, most powerful directive within the flex-layout API toolbox and is essentially the FlexBox API for resizing elements in horizontal or vertical stacks.

Flexbox element resizing utilizes three (3) parameters:

• 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, or
• Play with the online Flex-Layout Demos.

fxFlex Attribute Usages

The [fxFlex directive supports two (2) usages: short-form & long-form.

<div fxFlex="<basis>">                 </div>, or
<div fxFlex="<grow> <shrink> <basis>"> </div>

• 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"

Flex-basis aliases are accepted shorthand terms used to quickly specify Flexbox stylings. Here are the industry mappings of the alias to its resulting CSS styling:

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}

Shown below is an example of a non-trivial layout using various fxFlex options:

Source Code:


Live Demo:


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.

Default 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) as an 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) such as <div fxFlex fxShrink="0" fxGrow="2"></div> would result in an inline styling of flex : 2 0 0.000000001px.

What this means to the developer is an intuitive resizing for elements:

The notation

<div fxLayout="row">
   <div fxFlex><div>
</div>

to mean

Resize the div element to fill the available space along the 
horizontal, main-axis flow of its parent container!

The notation:

<div fxLayout="row">
   <div fxFlex><div>
   <div fxFlex><div>
   <div fxFlex><div>
</div>

to mean

Resize the div elements to fill 1/3rd each the available space 
along horizontal main-axis. 

---

Known Issues with fxFlex

While Flex-Layout makes every attempt to assign smart, valid flexbox stylings... some usages and some browsers will manifest layout issues.

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.


Developer's seeking details on FlexBox should

• Review CSS-Tricks - A Guide to FlexBox, or
• Play with the online Flex-Layout Demos.