Attribute Layout API

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

data-layout attribute

Values

Value format: "<direction> <options>". Possible values:

Direction

• row: for a row layout
• column: for a column layout

Options

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

• reverse
• wrap

Example

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

data-layout-align attribute

Values

Value format: "<main-axis> <cross-axis>". Possible values:

Main Axis

• start
• end
• center
• space-between
• space-around
• space-evenly

Cross Axis

• start
• end
• center
• baseline
• stretch

Example

<div data-layout="row"
     data-layout-align="center center">
    <span>One</span>
</div>