# Align

### How to Adjust Alignment in AppSections Groups

The "Align" setting in AppSections Groups allows you to control the alignment of child blocks within a group using flexbox properties. This setting determines how the blocks are positioned along the cross axis (perpendicular to the main axis) within the group, enhancing the visual organization and layout of your elements. Here is how you can adjust the alignment:

### **Align**

**Purpose:** This setting allows you to define the alignment of child blocks within a group using flexbox properties. **Usage:** Select from three options to set the desired alignment.

### Alignment Options

1. **Center:** Aligns the child blocks to the center along the cross axis.
2. **Start:** Aligns the child blocks to the start along the cross axis.
3. **End:** Aligns the child blocks to the end along the cross axis.

### Explanation of Alignment in a Flex Environment

1. **Center:**
   * **Behavior:** Child blocks are centered along the cross axis (vertically if the main axis is horizontal, or horizontally if the main axis is vertical).
   * **Use Case:** Useful for centering elements within the available space, such as vertically centering a row of buttons or horizontally centering a column of text.
2. **Start:**
   * **Behavior:** Child blocks are aligned at the start of the cross axis.
   * **Use Case:** Useful for aligning elements to the top (if the main axis is horizontal) or to the left (if the main axis is vertical), such as left-aligning a list of items.
3. **End:**
   * **Behavior:** Child blocks are aligned at the end of the cross axis.
   * **Use Case:** Useful for aligning elements to the bottom (if the main axis is horizontal) or to the right (if the main axis is vertical), such as right-aligning a set of icons.

### Steps to Adjust Alignment

1. **Select the Group:**
   * Open your Shopify theme editor.
   * Navigate to the specific group where you want to adjust the alignment.
2. **Locate the Align Setting:**
   * In the settings for the group, find the **Align** option.
3. **Select Alignment Option:**
   * Choose one of the three options based on your design preferences:
     * **Center:** Aligns the child blocks to the center along the cross axis.
     * **Start:** Aligns the child blocks to the start along the cross axis.
     * **End:** Aligns the child blocks to the end along the cross axis.

### Ensuring the Right Alignment Application

1. **Preview Changes:**
   * After selecting an alignment option, preview your store to see how the changes look.
   * Check the group to ensure the alignment setting is applied correctly and enhances the layout.
2. **Check Consistency:**
   * Ensure that the alignment setting aligns with your brand’s aesthetic and provides a cohesive look across both desktop and mobile devices.
3. **Test Across Devices:**
   * Verify the alignment setting on different devices to ensure it looks good and maintains functionality on all screen sizes.

### Summary

By using the "Align" setting in AppSections, you can control the alignment of child blocks within groups in your Shopify store. This flexibility allows you to enhance the visual organization and layout of your elements, ensuring a dynamic and engaging user experience across all devices. Adjusting the alignment helps create a more structured and visually appealing design.

If you have any questions or need further assistance, please contact our customer support team.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appsections.com/settings/children-alignment/sections-blocks/align.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.