Skip to main content

FxLayoutGap

The fxLayoutGap directive specifies the spacing between children within a flexbox container (e.g. nested within a fxLayout container).

It applies the native CSS gap property to the container itself, so the spacing is added between items along the layout axis and between wrapped rows/columns.

  • A single value (e.g. fxLayoutGap="20px") sets both the row and column gap.
  • Two values (e.g. fxLayoutGap="10px 20px") map to the CSS gap shorthand: <row-gap> <column-gap>.
  • The gap is direction-independent: it behaves identically for row/column, reversed flows, and rtl.

Breaking change (v22): fxLayoutGap now uses CSS gap instead of applying margin to each child. The element must be a flex container (apply fxLayout) for the gap to take effect. The legacy " grid" suffix (e.g. fxLayoutGap="10px grid") is still accepted but is now equivalent to a plain gap, since gap already spaces wrapped rows correctly.

Examples:​

Flex-Direction: Row​

<div fxLayout="row">
  <div>1. One</div>
  <div>2. Two</div>
  <div>3. Three</div>
  <div>4. Four</div>
</div>

lg_1

<div fxLayout="row" fxLayoutGap="20px">
  <div>1. One</div>
  <div>2. Two</div>
  <div>3. Three</div>
  <div>4. Four</div>
</div>

lg_2

Flex-Direction: Column​

<div fxLayout="column">
  <div>1. One</div>
  <div>2. Two</div>
  <div>3. Three</div>
  <div>4. Four</div>
</div>

fxLayout_column

<div fxLayout="column" fxLayoutGap="20px">
  <div>1. One</div>
  <div>2. Two</div>
  <div>3. Three</div>
  <div>4. Four</div>
</div>

fxLayout_column_gap

Using fxLayoutGap with Wrap​

Because fxLayoutGap now uses the CSS gap property, spacing is automatically applied between wrapped rows and columns as well as between items — without the extra leading-margin artifacts the previous margin-based implementation produced on the last/short row.

When sizing wrapped children with fxFlex, still account for the gap so items fit per row, e.g. fxFlex="calc(50% - 25px)".

Issue: Rendered Layout without gap considerations:​

screen shot 2017-05-20 at 4 03 37 pm

Solution: Rendered Layout with gap considerations:​

image

<md-card fxFlex fxFlexAlign="start">
  <md-card-content>
    <div fxLayout fxLayout.xs="column wrap" fxLayoutGap="25px">
      <md-input-container fxFlex="calc(50% - 25px)">
        <input mdInput placeholder="Name" />
      </md-input-container>
      <md-input-container fxFlex="calc(50% - 25px)">
        <input mdInput placeholder="Occupation" />
      </md-input-container>
      <md-input-container fxFlex="calc(50% - 25px)">
        <input mdInput placeholder="Company" />
      </md-input-container>
    </div>
  </md-card-content>

  <md-card-actions>
    <button md-button>Anterior</button>
    <button md-button>Proximo</button>
  </md-card-actions>
</md-card>