Display and Align Tab

The Display & Align tab provides tools to define how elements are displayed and aligned within their container. It focuses on layout structures, especially using flexbox, to control positioning and spacing of child elements.

In this tab, you can:

• Display – Set how an element is rendered (e.g., block, inline, flex, grid).

• Flex Direction – Decide the direction of flex items (row, column, etc.).

• Flex Wrap – Allow items to wrap onto multiple lines when needed.

• Align Content – Adjust spacing between rows of items within a flex container.

• Align Items – Control vertical alignment of items inside a container.

• Justify Content – Define horizontal alignment and spacing between items.

• Justify Items – Align individual items within their own area.

• Flex / Row Gap – Set spacing between items in a flex or grid container.

• Flex Grow – Allow items to expand and take up available space.

• Flex Shrink – Define how items shrink when space is limited.

• Flex Basis – Set the initial size of a flex item before space distribution.

The Display & Align tab is key for creating responsive, structured layouts where alignment and spacing are consistently managed. For full details, supported values, and layout examples, see the following sections.