# Flexbox

> Structure responsive interfaces with the Flexbox component, particularly suited to phones and tablets. Combine it with the Responsive design option for optimal layout management.

https://docs.pandasuite.com/essentials/components/flexbox/

**The Flexbox component arranges its children along a main axis — horizontally or vertically — and automatically resizes them to fit the available space. It is the go-to layout for responsive interfaces, especially on phones and tablets.**

Pair it with the [Responsive](https://docs.pandasuite.com/essentials/layout/responsive-design/) option to adapt the display across screen resolutions without redefining each element's size or position.

## Use cases

- **Dynamic text and translations**: lay out text blocks whose height varies with the data or [language](https://docs.pandasuite.com/essentials/project-properties/languages-and-localization/) — the Flexbox repositions the following items automatically.
- **Scrollable lists of authored cards**: stack hand-designed sections or cards vertically and let the Flexbox manage the scroll size when the screen overflows.
- **Responsive grids**: combine a horizontal orientation with **Wrap children** to flow items into a multi-row grid that adapts to the screen width.
- **Section-based scroll experiences**: anchor markers on key children to fire events or jump the layout to a precise section as the user scrolls.
- **Elements that stay on screen while scrolling**: [pin](https://docs.pandasuite.com/essentials/components/flexbox/#pin-an-element-while-scrolling) a section title, an image, or a video to hold it in place while the user scrolls on, and use the pin progress to animate another component.

## What is Flexbox layout?

Flexbox is a layout model based on a main axis. Elements arrange themselves fluidly along that axis — horizontally (side by side) or vertically (stacked from top to bottom) — and the container automatically adjusts each item's size to fit the available space.

Inside a Flexbox, items follow the order of the layer list. To reorder them, move them in that list. When a child grows or shrinks (typically because its text content changes), the Flexbox repositions the following items accordingly, which keeps responsive and dynamic content tidy.

Children can be plain objects or wrapped in a [Group component](https://docs.pandasuite.com/essentials/components/group/) to inherit shared sizing rules.

> **Tip**
>
> Need to keep a dynamic text centered as it grows or shrinks? Wrap a single
> text bound to your data inside a horizontal Flexbox with **Wrap children**
> disabled — the Flexbox keeps it vertically centered without any manual
> repositioning. Switch the orientation to vertical to center horizontally on
> the same principle.

## Insert a Flexbox

Click on **Components** and insert the **Flexbox** component.

Place it where you want your elements to appear. Inside, insert your children directly or wrap them in a **Group** component for shared sizing rules.

In the **Properties** panel, you can configure:

- **Orientation**: choose **Horizontal** or **Vertical** for the main axis.
- **Wrap children**: lets elements flow onto a new line (or column) when the main axis runs out of space.
- **Padding**: set the inner padding of the container with **L**, **R**, **T**, and **B** values for left, right, top, and bottom.
- **User scrolling**: enables the touch or mouse gesture for scrolling the layout when its content overflows.
- **Scrollbar**: shows or hides the scrollbar.
- **Maintain scroll position**: keeps the user's scroll offset when they leave and come back to the screen.

> **Tip**
>
> Turn on **User scrolling** and the Flexbox scrolls its content when that
> content does not all fit on screen. Its scroll size comes automatically from
> the elements inside, growing or shrinking as your content changes. This makes the Flexbox a
> scrolling area on its own, so you can build a whole scrolling page with a
> single Flexbox instead of putting it inside a
> [Scrolling Area](https://docs.pandasuite.com/essentials/components/scrolling-area/). Use a separate
> Scrolling Area only for a scroll box you size yourself, independently of the
> rest of the layout.

[Image: Vertical Flexbox with a photo, an audio player and a long text, and User scrolling set to Yes in its properties]

## Create markers

Markers on a Flexbox are anchored to a specific direct child. Use them to trigger actions when an item enters the visible area, navigate to a precise landing position, or synchronize the layout with another component. See the [Markers](https://docs.pandasuite.com/essentials/interactions/markers/) overview for the general concept.

To create a marker:

1. Enter the Flexbox in edit mode.
2. Select the direct child you want to anchor the marker to.
3. Click the **+** button in the marker list, then choose **Create marker from selected item**.

The marker stays attached to that child even when the order changes — it tracks the item itself, not its position in the list.

### Marker properties

Each Flexbox marker exposes:

- **Target item**: the child the marker is bound to. You can reassign the target later from the marker properties.
- **Item anchor**: the reference point on the target item — **Top**, **Center**, or **Bottom** for a vertical Flexbox; **Left**, **Center**, or **Right** for a horizontal one.
- **Direction**: filter when the marker fires — **Forward**, **Backward**, or **Both**.
- **Custom viewport anchor**: when set to **Yes**, choose a dedicated **Viewport anchor** for where in the visible area the crossing is detected. When set to **No**, the viewport anchor mirrors the item anchor.

[Image: Properties of a Flexbox marker: Item anchor Center, Direction Both, Custom viewport anchor No]

Hover a marker in the list and click the **Pin** icon to make it the default position: the Flexbox opens with that item already aligned in the visible area.

## Triggers

Choose your trigger from the list:

- **Positions \[markers]**: each anchor marker fires when the item it is bound to crosses the viewport, in the configured **Direction**. Use it to start an animation, switch a [Multi-State](https://docs.pandasuite.com/essentials/components/multi-state/), or load related content as the user scrolls past the marker.
- **Tap / Click**
- **Double tap / click**
- **Touch down**
- **Touch up**
- **Swipe up/down/right/left**
- **Mouse over/out**

## Actions

### Scroll to item

Use **Scroll to item** to jump to a child by its position in the list, choosing where in the visible area it lands. No marker is required.

- Select the triggering object (e.g., a button).
- Add a new action by selecting **Interact with a component > Flexbox > Scroll to item**.
- Set the **index** of the target child, the landing **position** (Top, Center, or Bottom for a vertical Flexbox; Left, Center, or Right for a horizontal one), and the scroll **duration**.

[Image: Scroll to item action on a tap, targeting a vertical Flexbox: Index 0, Position Top, Duration 0.4 s]

### Scroll to marker

Use **Scroll to marker** to bring an authored marker into view. Unlike **Scroll to item**, the landing position comes from the marker definition (item anchor and viewport anchor), so the same action gives the same visual result regardless of item size or list order.

- Select the triggering object.
- Add a new action by selecting **Interact with a component > Flexbox > Scroll to marker**.
- Pick the target marker.

## Pin an element while scrolling

Pin a direct child of a Flexbox to keep it on screen while the user scrolls on. The Flexbox reserves room for the pin after the element, so the content that follows waits for the pin to end instead of covering the element. Through its [pin channel](https://docs.pandasuite.com/essentials/components/flexbox/#synchronize-a-flexbox), the pin progress can also drive another component.

Select one or more direct children of the same Flexbox. In the **Properties** panel, the **Layout** section shows:

- **Pin**: turns pinning on for the selected elements.
- **Distance**: how long the element stays pinned, in multiples of the visible height of the Flexbox (**× height**, or **× width** in a horizontal Flexbox). With **1**, the element holds while the user scrolls one full Flexbox height. Default **1**.
- **Align**: where the element holds while pinned, inside the Flexbox **Padding**: **Top**, **Center**, or **Bottom** (**Left**, **Center**, or **Right** in a horizontal Flexbox). Default **Top**.

**Distance** and **Align** appear once **Pin** is on.

> **Note**
>
> The **Pin** setting is unrelated to the **Pin** icon of the marker list, which
> makes a marker the default position.

These settings are offered on the direct children of a Flexbox whose **Wrap children** is off. A [Collection](https://docs.pandasuite.com/essentials/data/collection/) does not offer them. A pin holds within the Flexbox that directly contains the element: to pin an element placed in a Group, pin the Group, and pin the elements of the Flexbox that scrolls rather than those of a nested Flexbox.

Good to know:

- **Leave enough content after the element.** A pin only runs to its end if the Flexbox can scroll that far. When the content after the element is too short, the pin and its progress stop where the scrolling stops.
- **Markers and scroll actions** treat a pinned element as the element plus its distance.
- **Preview**: the canvas shows the element at its normal size, without the distance. Open the preview to see the pin.

> **Warning**
>
> Pinning needs an up-to-date viewer. An app installed before pinning was
> available opens the project but ignores pins, and so does a hosted web app
> kept on an [earlier web viewer version](https://docs.pandasuite.com/essentials/web-publishing/publish-to-the-web/#pin-the-web-viewer-version).
> For an installed app, generate and distribute a new file, see
> [Update your application](https://docs.pandasuite.com/essentials/content-management/update-your-application/#exporting-a-new-file-for-redistribution).

## Synchronize a Flexbox

[Synchronization](https://docs.pandasuite.com/essentials/components/synchronization/) lets you bind a Flexbox to another component. The Flexbox exposes:

- **Scrolling**
- **Markers**
- **Pin: \[element name]**: one channel per pinned element. It follows the pin progress: 0 before the pin, from 0 to 100 over the distance, 100 after it.

These parameters appear in the **Properties** panel of the Synchronization component.

To animate a component while an element is pinned, add the Flexbox to a Synchronization, turn on its **Pin: \[element name]** channel, then add the component to animate, for example a [Multi-State](https://docs.pandasuite.com/essentials/components/multi-state/). **Reverse** works as for any other channel. Give each pin channel its own Synchronization: turning one on turns off the other channels of that Flexbox in the same Synchronization.