Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

Linear Layout

If you want to arrange children sequentially without dealing with the complexities of flexible box and grid layouts (such as shrink and placement issues), consider using linear layout. This layout is inspired by linear layout in Android.

The default layout direction of a linear layout is vertical. You can also use Web's alignment properties such as align-items, align-self, and justify-content with this layout. For the supported properties, please refer to the Reference section.

How to Build a Linear Layout?

Step 1: Apply display: linear

To implement a linear layout, modify the display property of the parent element to use a linear layout for its children.

display: linear;

Step 2: Set the Layout Direction

A linear layout arranges elements along the main and cross axes, similar to a flexible box layout. The main axis refers to the direction in which elements are aligned, whereas the cross axis is perpendicular to it.

You can adjust the layout direction by altering the linear-direction property of the parent container, akin to the flex-direction property in flexible box layouts. By default, linear-direction is set to column.

linear-direction: column;

Step 3: Align Children Along the Main Axis

To control the position of child elements along the main axis, use the justify-content property. In the demo below, the main axis is vertical.

layoutsrc/linear_justify_content/index.tsx
Preview

Step 4: Align Children Along the Cross Axis

To align items within a container along the cross axis, apply align-items to the container or align-self to children.

In the example below, the cross axis is vertical, with align-items: center used in the container to center children along this axis.

layoutsrc/linear_align_items/index.tsx
Preview

By adjusting the align-self property on a child, you can override align-items behavior, as shown with the first block below the parent element.

layoutsrc/linear_align_self/index.tsx
Preview
INFO

Please note that when the cross-axis size of the parent element (such as the width when linear-direction: column) is set, and if the size of the child element in this direction is not specified (or auto), the children's size along the cross-axis will expand to fill the container.

Step 5: Specify Dynamic Sizes Along the Main Axis

Linear layout allows for the linear-weight attribute, enabling adaptive sizing along the main axis based on assigned weight ratios and available space.

Set the linear-weight for each child to define its size share along the main axis. The parent container adjusts every child's dimensions to fit proportions derived from their respective weight values relative to available space.

layoutsrc/linear_weight/index.tsx
Preview

In the above example, linear-weight specifies a scale value without unit representing the amount of space available for each child element along the main axis. The three child elements will have a 0.5 : 2 : 0.5 ratio of the main axis space.

Reference

Currently, the linear layout supports the following layout properties:

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.