# LayoutAlign

**Repository Path**: llince/LayoutAlign

## Basic Information

- **Project Name**: LayoutAlign
- **Description**: 基于ArkTS声明式开发范式，实现Flex、Column、Row和Stack四种常用布局容器对齐方式。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2025-09-23
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Common ArkUI Layout Container Alignment Modes

## Introduction

This codelab introduces how to set the alignment modes of child components in the **Flex**, **Column**, **Row**, and **Stack** containers. You will learn to use **alignItems**, **justifyContent**, **alignContent**, **alignSelf**, and **align** to set alignment modes in different containers.

<img src='./screenshots/layout.en.png' width=320>

## Concepts

- **Main axis**: There are two axes in a container by default, that is, the main axis and cross axis. The direction of the main axis varies according to the container.
  - In the **Column** container, the direction of the main axis is vertical.
  - In the **Row** container, the direction of the main axis is horizontal.
  - In the **Flex** container, you can set the direction of the main axis by setting the **direction** parameter. If it is set to **Column**, the direction of the main axis is vertical. If it is set to **Row**, the direction of the main axis is horizontal.
  - In the **Stack** container, the main axis and cross axis are not specified. You can set the **alignContent** parameter to change the alignment mode of components in the container.
- **Cross axis**: The cross axis intersects vertically with the main axis. If the main axis is vertical, the cross axis is horizontal, and vice versa.

## Permissions

N/A

## How to Use

1. There are four container modules on the main page: **Flex**, **Column**, **Row**, and **Stack**. Tap a container module to go to the corresponding page.
2. On the second page, there are different radio button lists for you to set different alignment modes.

## Constraints

1. The sample is only supported on Huawei phones with standard systems.
2. HarmonyOS: HarmonyOS 5.0.5 Release or later.
3. DevEco Studio: DevEco Studio 6.0.2 Release or later.
4. HarmonyOS SDK: HarmonyOS 6.0.2 Release SDK or later.