Class Layout API

This page describes how to use the class based layout API.

fx-layout classes

Classes

To choose between a row and column layout of an element you can add the following classes:

• fx-layout-row
• fx-layout-column

Options

In addition to these you can optionally add the following, to control the corresponding flex properties:

• fx-layout-wrap
• fx-layout-reverse

Example

<div class="fx-layout-row">
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
</div>

fx-align classes

Values

To control the layout-align behaviour, you can use combinations of two classes. One for the main axis and the other for the cross axis.

Main Axis

Classes for the main axis follow the naming convention fx-align--[value]-x.

• fx-align--start-x
• fx-align--end-x
• fx-align--center-x
• fx-align--space-between-x
• fx-align--space-around-x
• fx-align--space-evenly-x

Cross Axis

Classes for the main axis follow the naming convention fx-align--x-[value].

• fx-align--x-start
• fx-align--x-end
• fx-align--x-center
• fx-align--x-baseline
• fx-align--x-stretch

Example

<div class="fx-layout-row
            fx-align--center-x
            fx-align--x-center">
    <span>One</span>
</div>