UI Alignment Constraints

The UI Alignment Constraints allow you to control the positioning of an element within a layout. You can set alignment options for both the vertical and horizontal axes. The three options available are start, end, and stretch.

Horizontal Alignment

• Start: Aligns the element to the left of the container. The element will be positioned according to the left value.

• End: Aligns the element to the right of the container. The element's right edge will be positioned according to the right value.

• Stretch: Stretches the element horizontally to fill the width of the container, maintaining the left and right margin values.

Vertical Alignment

• Start: Aligns the element to the top of the container. The element will be positioned according to the top value.

• End: Aligns the element to the bottom of the container. The element's bottom edge will be positioned according to the bottom value.

• Stretch: Stretches the element vertically to fill the height of the container, maintaining the top and bottom margin values.

Examples

1. If you select start for both vertical and horizontal alignment, the element will be positioned at the top-left corner, with the top and left values determining the exact position.

2. If you select end for both vertical and horizontal alignment, the element will be positioned at the bottom-right corner, with the top and left values determining the exact position.

3. If you select stretch for horizontal alignment, the element will span the full width of the screen, with its width determined by the left and right margin values.

4. If you select stretch for vertical alignment, the element will span the full height of the screen, with its height determined by the top and bottom margin values.

Override Constraints for Tablet and Desktop

In addition to the default mobile settings, you can override the alignment constraints for larger screens such as tablets and desktops. This allows you to optimize your UI for various screen sizes and create a truly responsive design.

To do this, simply set the desired alignment values for the tablet and desktop breakpoints in the settings. This will override the default mobile constraints, providing a different alignment behavior on these devices.

Remove Overrides

If you wish to revert back to the mobile settings on a tablet or desktop, you can easily do so by clicking on the 'Follow phone settings' button. This will remove the override constraints, allowing the element to align according to the default mobile settings on all devices. This feature provides a flexible way to adjust your UI alignment constraints as per your design requirements.