The Row

<row-l layout="gap:1 justify:space-between align:end twin-width nowrap">...</row-l>

The Row is a flexbox container designed to arrange its elements in a row.

It automatically wraps the content when it overflows.

Additionally, you can use the twin-width attribute to ensure all child elements share the same width.

When to use ?

When you need to put some elements in row in a container.

Attributes

• justify : the justify-content value.
• align: the align-items value.
• gap : the space between child elements.
• twin-width : gives the same with to every child elements.
• nowrap : disables the natural wrapping of the Row.

gap

You can use the gap attribute to set the spacing between elements inside the Row.

justify

To control the horizontal alignment of child elements, simply assign a value to the justify attribute.

You can use any valid CSS value, such as center, space-between, and others.

align

To control the vertical alignment of child elements, use the align attribute, which works similarly to the justify attribute.

You can assign any value valid for the CSS align-items property, such as flex-start, center, stretch, etc.

twin-width

The twin-width attribute ensures that all children of the Row have the same width.

nowrap

By default, the Row will wrap to a new line when the content overflows, as shown here:

But when the nowrap attribute is applied, the Row will never wrap, even when the content overflows.