feat(api): add new directive 'layout-gap'

[ThomasBurleson]

The intent is to insert a gap between the immediate flex children of an element defining both the layout and layout-gap attributes. The result is a column or row of items that have an 8px gap between each item but no gap/margin applied to the final element nor to a single item.

[layout=column][layout-gap] > [flex]:not(:last-child) {
  margin-bottom: 8px;
}

[layout=row][layout-gap] > [flex]:not(:last-child) {
  margin-right: 8px;
}

References angular/material#2360

[ThomasBurleson]

layout-margin, and layout-padding will also be useful to easily add margin or padding values to all content children element nodes.

<div fxLayout="column" fxFill>
    <div fxLayout fxLayoutGap="17px" fxFlex >
        <div class="one" fxFlex="20" fxLayoutAlign="center center"> A </div>
        <div class="two" fxFlex="80" fxLayoutAlign="center center"> B </div>
    </div>
</div>    

[un33k]

So confusing ... not sure to use fxFlexLayoutGap or fx-layout-gap as examples show both?

[ThomasBurleson]

@un33k - That was a comment for alpha-releases. The @angular convention is to use camelCase notations for directive markup/selectors.

<div fxLayout="column" fxFill>
    <div fxLayout fxLayoutGap="17px" fxFlex >
        <div class="one" fxFlex="20" fxLayoutAlign="center center"> A </div>
        <div class="two" fxFlex="80" fxLayoutAlign="center center"> B </div>
    </div>
</div>    

We are unable to support changes to closed issues and comments. We will endeavor to keep our WIki and API Documentation updated.

[un33k]

@ThomasBurleson clear now. thx

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}