The align box is a 3 x 3 grid that appears in Style panel > Layout when display is set to flex or grid. You can use the align box as a visual representation of the flex parent or grid to quickly align flex and grid children inside their parent elements.
To get started, click the align box cell to which you want to align your content, or click anywhere in the align box to give it focus and use the directional arrow keys on your keyboard to navigate across its cells. You can double-click align box cells and/or use shortcuts to quickly align flex and grid children.
As you interact with the align box, the canvas reflects your changes and the X and Y axis dropdowns update to reflect the current alignment settings.
Shortcuts
Flex
- Set justification (i.e., justify-content) to space between: double-click an align box cell or Command (on Mac) or Control (on Windows) + click an align box cell
- Set alignment (i.e., align-items) to stretch: Option (on Mac) or Alt (on Windows) + click an align box cell
Learn more about aligning flex children.
Grid
- Set justification (i.e., justify-items) to stretch: double-click an align box cell or Command (on Mac) or Control (on Windows) + click an align box cell
- Set alignment (i.e., align-items) to stretch: Option (on Mac) or Alt (on Windows) + click an align box cell
Learn more about aligning grid children.