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 (proportional to the others) if there's space available. The flex-grow value overrides the width.
• flex-shrink: defines how much a flexbox item should shrink if there is not enough space available.
• flex-basis: controls the default size of an element, before it is manipulated by other Flexbox properties

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 usages: short-form and 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

Real Example

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

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

import {Input} from '@angular/core';
@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

Where the default values of flew-shrink and flex-grow are 1 and have not been overridden.

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>

means

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>

means

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