Flex Layout overview

Last updated on Jun 2, 2026

Use the Flex Layout panel in InDesign to create, align, set direction, wrap, justify, and space items in Flex Layout.

What is a Flex layout?

Flex Layout is a feature that lets you create containers that automatically adapt as content changes. Items in the container are positioned using direction, spacing, padding, and alignment. When content is added, removed, or resized, the layout adjusts automatically, eliminating the need for manual adjustments.

Access Flex Layout options

Select an object/group/multiple objects in your document and do one of the following to access Flex Layout options:

Go to Object > Flex Layout.
Right-click the object to access Flex Layout.
Go to Window > Flex Layout panel.
Select once to work with the parent flex and double-click to select the child.
Use the Direct Selection tool to select the child items.

Add to Flex Layout	Adds selected objects to a Flex Layout.
Convert to Flex Layout	Converts an object (rectangle frame, rectangle shape, or group) to a Flex Layout.
Remove Flex Layout	Removes the Flex Layout from selection. If the Flex Layout had multiple objects, a group is created. If it had one object, the object remains.
Show Flex Controls	Opens the Flex Layout panel (alternative to the Properties panel).

Flex Layout introduces a CSS Flexbox-like container concept in InDesign. It provides powerful layout control for child objects. With Flex Layout, designs become structured, more adaptive, and require less manual adjustment.

Flex Layout container

You can configure Flex Layout properties directly in Object Styles. You can create an Object Style named Vertical Container that includes Flex Layout settings, and then apply it to any Flex Layout container in your layout.

Example:

Use the Object Styles panel to apply Flex Layout and set properties such as direction, alignment, and spacing. Once saved, apply this style to other containers for consistent layout behavior.

Flex Layout child

The same Flex Layout section in Object Styles can also define properties for Flex Layout child elements and their nested child elements, allowing you to standardize behavior, such as fixed or flexible dimensions, across your layout.

Direct creation of interactive elements: Convert child elements within a Flex Layout into interactive elements without creating them separately and adding them to the Flex Layout.
Lock child elements: Lock one or more child elements within a Flex Layout to prevent direct dragging, resizing, or moving them outside the frame, while still allowing position changes using keyboard arrow keys.
Keyboard navigation for child elements: Reposition locked or unlocked elements using the left or right arrow keys in horizontal layouts or the up or down arrow keys in vertical layouts.

Tip

You can use Object Styles to define flex properties within locked flex frames.

Flex Layout panel

To access the panel, go to Window > Flex Layout. The Flex Layout panel opens. You can now create or add a Flex Layout or customize an existing one according to your requirements. If there's no selection, you can use the panel to change the defaults (applicable if auto-detect is OFF). Navigate to Preferences > General > Auto-detect and apply Flex Layout settings to check for the auto-detect setting.

A. Width of the Flex container B. Height of the Flex container C. Wrap D. Direction of objects in Flex Layout E. Vertical Spacing F. Horizontal Spacing G. Padding H. Justification I. Alignment of the objects in Flex Layout

Width and Height

The size of both Flex Layout containers and their children can be controlled independently. For a Flex Layout container, the width and height can be:

Fixed: The container size stays constant, regardless of its content.
Auto: The container size grows or shrinks based on the size of its children.

For a Flex Layout child (including nested Flex Layout):

Fixed: The child size stays constant, regardless of its own content.
Auto: The child size adapts to fit its own content or children.
Fill Space: The child expands to occupy the remaining available space in that dimension, sharing space with other Fill Space siblings as needed.

Wrap

Turns on or off the object wrapping in the container.

Direction

Choose how items flow inside the container (row, row reverse, column, column reverse).

Spacing

Controls the padding and the spacing.

Padding: Define spacing inside the container on all sides (top, bottom, left, right).
Horizontal Spacing : Set consistent spacing between items horizontally.
Vertical Spacing : Set consistent spacing between items vertically.

Justification

Controls the distribution of items along the main axis.

	Aligns the row to the start of the Flex Layout and aligns the items to the start of the row.
	Aligns the row to the center of the Flex Layout and aligns the items to the center of the row.
	Aligns the row to the end of the Flex Layout and aligns the items to the end of the row.
	Aligns items in rows such that – Equal space on both sides of each item. The edge items only have one side exposed; the space at the edges is half of the space between items.
	Aligns items in rows such that – The first item is flush with the start edge, and the last item is flush with the end edge. The remaining items are evenly spaced only in between. Distributes the items evenly along the main axis, with the first item at the start and the last item at the end. No gap at the outer edges.
	Aligns items in rows such that – Equal space everywhere: between items and at the edges. Everything is truly even.

Alignment

Aligns items across the cross-axis: Top, Center, Bottom, or Left, Center, Right.

	Top left: Aligns the rows to the top left of the Flex Layout container and aligns the items in the row to the top left of the row.
	Center Left: Aligns the rows to the center left of the Flex Layout container and aligns the items in the row to the center left of the row.
	Bottom Left: Aligns the rows to the bottom left of the Flex Layout container and aligns the items in the row to the bottom left of the row.
	Top Center: Aligns the rows to the top center of the Flex Layout container and aligns the items in the row to the top center of the row.
	Center: Aligns the rows to the center of the Flex Layout container and aligns the items in the row to the center of the row.
	Bottom Center: Aligns the rows to the bottom center of the Flex Layout container and aligns the items in the row to the bottom center of the row.
	Top Right: Aligns the rows to the top right of the Flex Layout container and aligns the items in the row to the top right of the row.
	Center Right: Aligns the rows to the center right of the Flex Layout container and aligns the items in the row to the center right of the row.
	Bottom Right: Aligns the rows to the bottom right of the Flex Layout container and aligns the items in the row to the bottom right of the row.

Selection indicators in flex layouts

InDesign uses visual cues to help you understand selection states in flex layouts:

Dotted outlines indicate non‑active layout levels.
Solid outlines indicate selectable sibling frames.
The Direct Selection tool lets you select nested frames directly without repeated clicks.

These indicators help clarify hierarchy and selection focus when working with nested layouts.

On‑canvas padding and spacing controls

Flex layouts provide interactive on‑canvas controls for adjusting padding and spacing:

Linked padding: Adjust all four padding values together.
Unlinked padding: Adjust each side independently.
Horizontal and vertical spacing: Modify spacing directly between items, including wrapped rows or columns.

Visual indicators on the canvas reflect current values and update in real time in the Flex Layout panel.

Transform and shear Flex Layout frames

You can now rotate, mirror, scale, or shear a Flex Layout without interrupting its behavior. Transformations apply to both parent and nested flex frames, and the Flex Layout panel remains active while you transform objects. This allows you to adjust alignment, spacing, wrapping, and direction while transforming layouts, without breaking the flex structure.

Create print and digital materials with InDesign
Design impactful ads, magazine and book layouts, and more.

Open the app

Create a Flex Layout

Learn

Learn with step-by-step video tutorials and hands-on guidance right in the app.

Community

Join discussions, find answers, learn from experts, and share your knowledge.

Adobe Home

Access your favorite Creative Cloud apps, services, file management, and more.