grid flex layouts

You several layouting options:

grid: http://demo.fnx.io/fnx_ui/css/demo_grid.html

Use row to create tight grid without empty spaces between components.

Use row--gutter to create grid with nice margin between components.

Use row--gutter--horizontal with gutter between components, but only on left and right sides of components.

Grid has 12 columns, and you don't have create new row element for each row, simply add components to the grid, it will work out.

Each component in the grid MUST have it's width defined using classes sN, mN or lN, where N is an integer between 1 and 12 and s means small (phone), m medium (tablet) and l large (desktop). Like this:

<div class="row">
    <div class="s12 m6 l3">s12 m6 l3</div>
    <div class="s12 m6 l3">s12 m6 l3</div>
    <div class="s12 m6 l3">s12 m6 l3</div>
    <div class="s12 m6 l3">s12 m6 l3</div>
    <div class="s12">s12</div>
</div>

s(mall) has a top priority, so you MUST specify at least sN class. You components MUST be direct descendants of row element.

Use this layout to create multicolumn layouts (like two panel here: http://demo.fnx.io/fnx_ui/ng2/#/Form) or to place two components next to each other (street and number inputs in the same example).

flex: http://demo.fnx.io/fnx_ui/css/demo_flex.html

Sometimes you need your layout to be more flexible, and you don't want to be bound to 12 column grid system. In that case use flex--row or flex--column.

Every component nested in such element will be as tight as possible, unless you give it a flex--grow class. Like this:

<div class="flex--row margin--bottom">
    <div class="border padding">no grow</div>
    <div class="border padding flex--grow">flex--grow</div>
    <div class="border padding">no grow</div>
    <div class="border padding">no grow</div>
</div>

In that case you should also allow this component to shrink with flex--shrink. For example see the search box and two buttons above the table on http://demo.fnx.io/fnx_ui/ng2/#/Cookbook/Table. Or the whole layout of the main content in (header, table, footer) in the same example (which is a flex--column).

You should specify margin of your components by hand in flex layouts.

When using flex--column you should be sure, that the height of parent component is set. Either by height or by it's absolute position.