Skip to content

fxLayoutGap API

CaerusKaru edited this page Jan 13, 2019 · 16 revisions

The fxLayoutGap directive should be used on to specify margin gaps on children within a flexbox container (e.g. nested within a fxLayout container). There is a secondary mode to enable a gutter system with a margin applied on the host element.

Default Mode

  • margin-right used when the parent container flex-direction == "row"
  • margin-bottom used when the parent container flex-direction == "column"

Note that the last child item will NOT have a margin gap specified; only the inside gaps are specified. Additionally, fxLayoutGap does not respond to reveresed flow directions: column-reverse or row-reverse are used.

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

When using wrap with fxLayout to wrap rows or columns, developers should account for the gap sizes when specifying the child item sizes (using fxFlex).

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>

Grid Mode

To use fxLayoutGap with a gutter system, simply append the suffix grid to any fxLayoutGap value. For instance:

<div fxLayoutGap="16px grid">
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

This creates a gutter system by applying a margin to the host element and an inverse padding to each child. Other than this change, it works exactly as the default mode. It also takes flex-order and hidden elements into account, and has the same responsive abilities as the default mode.

Please note that unlike the standard gap functionality, fxLayoutGap with the grid keyword applies a padding to each child element to add the gutter, in addition to the margin on the host element.

Clone this wiki locally