<templates:flexlayout>
AJAX
Data
Forms
Layout
Logic
Navigation
Personalisation
Standard
Templates
DESCRIPTION
ATTRIBUTES
height
id
width
preventwrap
EXAMPLES
Basic Flex Layout
Regions
Third Party

<templates:flexlayout> </...>

A utility layout element used for displaying elements in a wrapping or non-wrapping row.

Content

<templates:card>
Cards must contain at least 1 card tag.

Attributes

height
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
id
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
width
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.
preventwrap
bool
The presence of this attribute indicates that the flexlayout should display all cards on a single line.

Examples

Basic Flex Layout

Flex layout container displaying three line of cards

HTML:

<templates:flexlayout style="justify-content: center; align-items: stretch;" preventwrap="preventwrap"> <templates:card style="padding: 20px; margin: 10px; border-radius: 0px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2)" cardsize="md"> <standard:image width="100%" maintainaspect="crop" height="207" src="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" /> <h2>Heading here</h2> <p>Cards are a place for small groups of content.</p> </templates:card> <templates:card style="padding: 20px; margin: 10px; border-radius: 0px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2)" cardsize="md"> <standard:image width="100%" maintainaspect="crop" height="207" src="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" /> <h2>Heading here</h2> <p>Cards are a place for small groups of content.</p> </templates:card> <templates:card style="padding: 20px; margin: 10px; border-radius: 0px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2)" cardsize="md"> <standard:image width="100%" maintainaspect="crop" height="207" src="/_public/Controls/Forms/HTMLEditor/new/Core/Insert/Composition/images/art2.png" /> <h2>Heading here</h2> <p>Cards are a place for small groups of content.</p> </templates:card> </templates:flexlayout>

Run Example