diff --git a/en/application-dev/ui/figures/en-us_image_0000001190466492.png b/en/application-dev/ui/figures/en-us_image_0000001190466492.png
new file mode 100644
index 0000000000000000000000000000000000000000..aebc1b5e3afbc74a161bdc481b1578ef79105a87
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001190466492.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001215645452.png b/en/application-dev/ui/figures/en-us_image_0000001215645452.png
new file mode 100644
index 0000000000000000000000000000000000000000..21478ddee0ac2a56230eb67406ba7ddb4600ee74
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001215645452.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001215796030.png b/en/application-dev/ui/figures/en-us_image_0000001215796030.png
new file mode 100644
index 0000000000000000000000000000000000000000..a449a54d3ebbb0fe35754a0b6191e090a9f57fb6
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001215796030.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001215965420.png b/en/application-dev/ui/figures/en-us_image_0000001215965420.png
new file mode 100644
index 0000000000000000000000000000000000000000..69ab2b53dc50fbe5f146b336993f86bf1e4a5f24
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001215965420.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001217236574.png b/en/application-dev/ui/figures/en-us_image_0000001217236574.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b45eda696b180bb917b10db8eb803e7babd1538
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001217236574.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001218108718.png b/en/application-dev/ui/figures/en-us_image_0000001218108718.png
new file mode 100644
index 0000000000000000000000000000000000000000..2fd6c145acd07026766c368d2e20724b0d1f8a04
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218108718.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001218259634.png b/en/application-dev/ui/figures/en-us_image_0000001218259634.png
new file mode 100644
index 0000000000000000000000000000000000000000..a54bd7cd05accb496c691b2527b08b0a11cd8c66
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218259634.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001218259636.png b/en/application-dev/ui/figures/en-us_image_0000001218259636.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d767cc276109fce015bb59bb0527b7830d23f54
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218259636.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001218419614.png b/en/application-dev/ui/figures/en-us_image_0000001218419614.png
new file mode 100644
index 0000000000000000000000000000000000000000..101f60e44760d98db7a904189f387e2b3557cf32
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218419614.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001218419616.png b/en/application-dev/ui/figures/en-us_image_0000001218419616.png
new file mode 100644
index 0000000000000000000000000000000000000000..746eb1f0ddc9ac1581f191b1e76d8d028dfd418e
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218419616.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001218579606.png b/en/application-dev/ui/figures/en-us_image_0000001218579606.png
new file mode 100644
index 0000000000000000000000000000000000000000..c8697767f19ae5cc5f7b30c4cbc2a23ffafb0844
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218579606.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001218579608.png b/en/application-dev/ui/figures/en-us_image_0000001218579608.png
new file mode 100644
index 0000000000000000000000000000000000000000..74526d5efee72c20ce09c731842c0d1c56159a97
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218579608.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001218579610.png b/en/application-dev/ui/figures/en-us_image_0000001218579610.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f407b77a24e90c854f25472e37c97e1cd40287b
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218579610.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001218739566.png b/en/application-dev/ui/figures/en-us_image_0000001218739566.png
new file mode 100644
index 0000000000000000000000000000000000000000..4384ea3a2997c4417eee0fbe0e6475c4925b5c36
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218739566.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001218739568.png b/en/application-dev/ui/figures/en-us_image_0000001218739568.png
new file mode 100644
index 0000000000000000000000000000000000000000..a66ff857ba7629951a39a1c2cc19c7b6fb43b9e1
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218739568.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001218739570.png b/en/application-dev/ui/figures/en-us_image_0000001218739570.png
new file mode 100644
index 0000000000000000000000000000000000000000..006efca8f390adea7edb0b4f54609c04fd0bd098
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001218739570.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001235146483.png b/en/application-dev/ui/figures/en-us_image_0000001235146483.png
new file mode 100644
index 0000000000000000000000000000000000000000..0bebd24640b896d465c3f130dcf69f10abab3def
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001235146483.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001235626467.png b/en/application-dev/ui/figures/en-us_image_0000001235626467.png
new file mode 100644
index 0000000000000000000000000000000000000000..189cc8a1e959a162f22d1b9b0dd9573614cb0673
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001235626467.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001260373911.png b/en/application-dev/ui/figures/en-us_image_0000001260373911.png
new file mode 100644
index 0000000000000000000000000000000000000000..223fab73b7c40f7b1bdc5cc05d2d8a91589b88d4
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001260373911.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001260555857.png b/en/application-dev/ui/figures/en-us_image_0000001260555857.png
new file mode 100644
index 0000000000000000000000000000000000000000..e63baa89d7b6f4c816ca6e4386851498d47eac36
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001260555857.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001261605867.png b/en/application-dev/ui/figures/en-us_image_0000001261605867.png
new file mode 100644
index 0000000000000000000000000000000000000000..096d7f530cc2d82391be453a7a5dbe659ba15513
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001261605867.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001262748569.png b/en/application-dev/ui/figures/en-us_image_0000001262748569.png
new file mode 100644
index 0000000000000000000000000000000000000000..7af6c8cc92db32d22b3f2022ab567ca9c8978b63
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001262748569.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001263019457.png b/en/application-dev/ui/figures/en-us_image_0000001263019457.png
new file mode 100644
index 0000000000000000000000000000000000000000..dea13c34b80626c7fe1a0036afbe69d5f236910c
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263019457.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001263019461.png b/en/application-dev/ui/figures/en-us_image_0000001263019461.png
new file mode 100644
index 0000000000000000000000000000000000000000..b79b7923adca0d6e2a211c29ef0d34b70bf02583
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263019461.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001263019463.png b/en/application-dev/ui/figures/en-us_image_0000001263019463.png
new file mode 100644
index 0000000000000000000000000000000000000000..10a7a63c5c41b636fa5a61b5a13ad7ed97c3d1fb
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263019463.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001263074739.png b/en/application-dev/ui/figures/en-us_image_0000001263074739.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2f0ff5761d3c5a19a300f7c891a717e13c2374d
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263074739.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001263139409.png b/en/application-dev/ui/figures/en-us_image_0000001263139409.png
new file mode 100644
index 0000000000000000000000000000000000000000..395631e2ed4572806bd93bcdb8ff86486e0b5bdf
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263139409.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001263139411.png b/en/application-dev/ui/figures/en-us_image_0000001263139411.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e481248c0e16f3311644a35fa3c71269a3e7877
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263139411.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001263259399.png b/en/application-dev/ui/figures/en-us_image_0000001263259399.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc4a266c02708116362da21577d5b1e582a011fd
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263259399.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001263259401.png b/en/application-dev/ui/figures/en-us_image_0000001263259401.png
new file mode 100644
index 0000000000000000000000000000000000000000..b233260ab8bf15c918389226a7773541399311a4
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263259401.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001263339459.png b/en/application-dev/ui/figures/en-us_image_0000001263339459.png
new file mode 100644
index 0000000000000000000000000000000000000000..99e18123d53b88779948b34c6c566005d989358b
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263339459.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001263339461.png b/en/application-dev/ui/figures/en-us_image_0000001263339461.png
new file mode 100644
index 0000000000000000000000000000000000000000..183d9468ca3901183b3fa55facbc976418e7a5f1
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001263339461.png differ
diff --git a/en/application-dev/ui/ui-ts-basic-components-button.md b/en/application-dev/ui/ui-ts-basic-components-button.md
new file mode 100644
index 0000000000000000000000000000000000000000..8f13accaa19720e3fd8acff04ee2ccd2a30c3c84
--- /dev/null
+++ b/en/application-dev/ui/ui-ts-basic-components-button.md
@@ -0,0 +1,188 @@
+# Button
+
+
+The **\<Button>** component is usually activated by user clicks to perform a specific action, for example, submitting a form. Buttons are classified as capsule, circle, or normal buttons.
+
+
+## Creating a Button
+
+You can create a button by invoking either of the following APIs:
+
+- Button(options?: {type?: ButtonType, stateEffect?: boolean})
+  This API creates a button that contains child components. In the syntax, **type** indicates the button type, and **stateEffect** indicates whether to enable the click effect for the button.
+
+  
+  ```
+  Button({ type: ButtonType.Normal, stateEffect: true }) {
+    Row() {
+      Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 })
+      Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
+    }.alignItems(VerticalAlign.Center)
+  }.borderRadius(8).backgroundColor(0x317aff).width(90)
+  ```
+
+  ![en-us_image_0000001260555857](figures/en-us_image_0000001260555857.png)
+
+- Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
+  This API creates a button that does not contain any child components. In the syntax, **label** indicates whether the created button contains child components.
+
+  
+  ```
+  Button('Ok', { type: ButtonType.Normal, stateEffect: true })
+    .borderRadius(8)
+    .backgroundColor(0x317aff)
+    .width(90)
+  ```
+
+  ![en-us_image_0000001215796030](figures/en-us_image_0000001215796030.png)
+
+
+## Setting the Button Type
+
+Use the **type** parameter to set the button type to **Capsule**, **Circle**, or **Normal**.
+
+- Capsule button (default type)
+  
+  ```
+  Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
+    .backgroundColor(0x317aff)
+    .width(90)
+  ```
+
+  ![en-us_image_0000001215645452](figures/en-us_image_0000001215645452.png)
+
+- Circle button
+  
+  ```
+  Button('Circle', { type: ButtonType.Circle, stateEffect: false })
+    .backgroundColor(0x317aff)
+    .width(90)
+    .height(90)
+  ```
+
+  ![en-us_image_0000001215965420](figures/en-us_image_0000001215965420.png)
+
+
+## Setting Styles
+
+- Set the border radius:
+  In general cases, you can use universal attributes to define the button styles. For example, you can use the **borderRadius** attribute to set the border radius.
+
+  
+  ```
+  Button('circle border', { type: ButtonType.Normal })
+    .borderRadius(20)
+  ```
+
+  ![zh-cn_image_0000001190463780](figures/zh-cn_image_0000001190463780.png)
+
+- Setting Text Styles
+  Add a font style for text displayed on the button.
+
+  
+  ```
+  Button('font style', { type: ButtonType.Normal })
+    .fontSize(20)
+    .fontColor(Color.Red)
+    .fontWeight(800)
+  ```
+
+  ![zh-cn_image_0000001189744672](figures/zh-cn_image_0000001189744672.png)
+
+- Set the background color:
+  You can do so by adding the **backgroundColor** attribute.
+
+  
+  ```
+  Button('background color').backgroundColor(0xF55A42)
+  ```
+
+  ![en-us_image_0000001235146483](figures/en-us_image_0000001235146483.png)
+
+- Assign a function to the button:
+  In this example, we are creating a button with the delete function.
+
+  
+  ```
+  Button({ type: ButtonType.Circle, stateEffect: true }) {
+    Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
+  }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
+  ```
+
+  ![en-us_image_0000001260373911](figures/en-us_image_0000001260373911.png)
+
+
+## Adding Events
+
+The **\<Button>** component is usually used to trigger actions. You can bind the **onClick** event to the button to have it respond with custom behavior after being clicked.
+
+
+```
+Button('Ok', { type: ButtonType.Normal, stateEffect: true })
+  .onClick(()=>{
+    console.info('Button onClick')
+  })
+```
+
+
+## Example Scenarios
+
+- Using the Button for Startup
+
+  You can use the button for any UI element that involves the startup operation. The button triggers the predefined event based on the user's operation. For example, you can use a button in the **\<List>** container to redirect the user to another page.
+
+  ```
+  import router from '@ohos.router'
+  
+  @Entry
+  @Component
+  struct ButtonCase1 {
+    build() {
+      List({ space: 4 }) {
+        ListItem() {
+          Button("First").onClick(() => {
+            router.push({ url: 'xxx' })
+          })
+        }
+  
+        ListItem() {
+          Button("Second").onClick(() => {
+            router.push({ url: 'yyy' })
+          })
+        }
+  
+        ListItem() {
+          Button("Third").onClick(() => {
+            router.push({ url: 'zzz' })
+          })
+        }
+      }
+      .listDirection(Axis.Vertical)
+      .backgroundColor(0xDCDCDC).padding(20)
+    }
+  }
+  ```
+
+
+  ![en-us_image_0000001235626467](figures/en-us_image_0000001235626467.png)
+
+
+- Using the Button for Submitting Forms
+  On the user login/registration page, you can use a button to submit a login or registration request.
+
+  
+  ```
+  @Entry
+  @Component
+  struct ButtonCase2 {
+    build() {
+      Column() {
+        TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
+        TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
+        Button('Register').width(300).margin({ top: 20 })
+      }.padding(20)
+    }
+  }
+  ```
+  
+  ![en-us_image_0000001190466492](figures/en-us_image_0000001190466492.png)
diff --git a/en/application-dev/ui/ui-ts-layout-flex.md b/en/application-dev/ui/ui-ts-layout-flex.md
new file mode 100644
index 0000000000000000000000000000000000000000..dc205b3a7bb1faeaa5367784cba16b8abd9f7660
--- /dev/null
+++ b/en/application-dev/ui/ui-ts-layout-flex.md
@@ -0,0 +1,370 @@
+# Flex Layout
+
+
+The **\<Flex>** component is used to create a flex layout. In a flex container created using the **Flex** API, child components can be laid out flexibly. For example, if there are three child components in a flex container, they can be horizontally centered and vertically equally spaced.
+
+
+## Creating a Flex Layout
+
+The available API is as follows:
+
+Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
+The **direction** parameter defines the flex layout direction. The **justifyContent** parameter defines the alignment mode of child components in the flex layout direction. The **alignContent** parameter defines the alignment mode of child components in the vertical direction. The **wrap** parameter defines whether the content can wrap onto multiple lines.
+
+## Flex Layout Direction
+
+The flex layout has two directions, following two axes. The main axis is the axis along which the child components follow each other. The cross axis is the axis perpendicular to the main axis. The **direction** parameter establishes the main axis. The available options are as follows:
+
+- **FlexDirection.Row** (default value): The main axis runs along the row horizontally, and the child components start from the start edge of the main axis.
+  
+  ```
+  Flex({ direction: FlexDirection.Row }) {
+    Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
+    Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
+    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .height(70)
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001218579606](figures/en-us_image_0000001218579606.png)
+
+- **FlexDirection.RowReverse**: The main axis runs along the row horizontally, and the child components start from the end edge of the main axis, in a direction opposite to **FlexDirection.Row**.
+  
+  ```
+  Flex({ direction: FlexDirection.RowReverse }) {
+    Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
+    Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
+    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .height(70)
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001218739566](figures/en-us_image_0000001218739566.png)
+
+- **FlexDirection.Column**: The main axis runs along the column vertically, and the child components start from the start edge of the main axis.
+  
+  ```
+  Flex({ direction: FlexDirection.Column }) {
+    Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
+    Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
+    Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .height(70)
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001263019457](figures/en-us_image_0000001263019457.png)
+
+- **FlexDirection.ColumnReverse**: The main axis runs along the column vertically, and the child components start from the end edge of the main axis, in a direction opposite to **FlexDirection.Column**.
+  
+  ```
+  Flex({ direction: FlexDirection.ColumnReverse }) {
+    Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
+    Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
+    Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .height(70)
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001263339459](figures/en-us_image_0000001263339459.png)
+
+
+## Wrapping in the Flex Layout
+
+By default, child components are laid out on a single line (also called an axis) in the flex container. Use the **wrap** parameter to set whether child components can wrap onto multiple lines. The available options are as follows:
+
+- **FlexWrap.NoWrap**: Child components are laid out on a single line. This may cause the child components to shrink to fit the container when the total width of the child components is greater than the width of the container.
+  
+  ```
+  Flex({ wrap: FlexWrap.NoWrap }) {
+    Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
+    Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
+    Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
+  } 
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001263139409](figures/en-us_image_0000001263139409.png)
+
+- **FlexWrap.Wrap**: Child components can break into multiple lines.
+  
+  ```
+  Flex({ wrap: FlexWrap.Wrap }) {
+    Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
+    Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
+    Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
+  } 
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001218419614](figures/en-us_image_0000001218419614.png)
+
+- **FlexWrap.WrapReverse**: Child components can break into multiple lines in the reverse order to the row.
+  
+  ```
+  Flex({ wrap: FlexWrap.WrapReverse}) {
+    Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
+    Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
+    Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001263259399](figures/en-us_image_0000001263259399.png)
+
+
+## Alignment in the Flex Layout
+
+
+### Alignment on the Main Axis
+
+Use the **justifyContent** parameter to set alignment of items on the main axis. The available options are as follows:
+
+- **FlexAlign.Start**: The items are aligned with each other toward the start edge of the container along the main axis.
+  
+  ```
+  Flex({ justifyContent: FlexAlign.Start }) {  
+    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
+    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
+    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001218259634](figures/en-us_image_0000001218259634.png)
+
+- **FlexAlign.Center**: The items are aligned with each other toward the center of the container along the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.
+  
+  ```
+  Flex({ justifyContent: FlexAlign.Center }) {  
+    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
+    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
+    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001218579608](figures/en-us_image_0000001218579608.png)
+
+- **FlexAlign.End**: The items are aligned with each other toward the end edge of the container along the main axis.
+  
+  ```
+  Flex({ justifyContent: FlexAlign.End }) {  
+    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
+    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
+    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001218739568](figures/en-us_image_0000001218739568.png)
+
+- **FlexAlign.SpaceBetween**: The items are evenly distributed within the container along the main axis. The first item is aligned with the main-start, the last item is aligned with the main-end, and the remaining items are distributed so that the space between any two adjacent items is the same.
+  
+  ```
+  Flex({ justifyContent: FlexAlign.SpaceBetween }) {  
+    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
+    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
+    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001263019461](figures/en-us_image_0000001263019461.png)
+
+- **FlexAlign.SpaceAround**: The items are evenly distributed within the container along the main axis. The space between the first item and main-start, and that between the last item and cross-main are both half the size of the space between two adjacent items.
+  
+  ```
+  Flex({ justifyContent: FlexAlign.SpaceAround }) {  
+    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
+    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
+    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001263339461](figures/en-us_image_0000001263339461.png)
+
+- **FlexAlign.SpaceEvenly**: The items are equally distributed along the main axis. The space between the first item and main-start, the space between the last item and main-end, and the space between two adjacent items are the same.
+  
+  ```
+  Flex({ justifyContent: FlexAlign.SpaceEvenly }) {  
+    Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
+    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
+    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .width('90%')
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001263139411](figures/en-us_image_0000001263139411.png)
+
+
+### Alignment on the Cross Axis
+
+Use the **alignItems** parameter to set alignment of items on the cross axis. The available options are as follows:
+
+- **ItemAlign.Auto**: The items are automatically aligned in the flex container.
+  
+  ```
+  Flex({ alignItems: ItemAlign.Auto }) {  
+    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
+    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
+    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .size({width: '90%', height: 80})
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001218419616](figures/en-us_image_0000001218419616.png)
+
+- **ItemAlign.Start**: The items are aligned with the start edge of the container along the cross axis.
+  
+  ```
+  Flex({ alignItems: ItemAlign.Start }) {  
+    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
+    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
+    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .size({width: '90%', height: 80})
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001263259401](figures/en-us_image_0000001263259401.png)
+
+- **ItemAlign.Start**: The items are aligned with the center of the container along the cross axis.
+  
+  ```
+  Flex({ alignItems: ItemAlign.Center }) {  
+    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
+    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
+    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .size({width: '90%', height: 80})
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001218259636](figures/en-us_image_0000001218259636.png)
+
+- **ItemAlign.End**: The items are aligned with the end edge of the container along the cross axis.
+  
+  ```
+  Flex({ alignItems: ItemAlign.End }) {  
+    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
+    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
+    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .size({width: '90%', height: 80})
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001218579610](figures/en-us_image_0000001218579610.png)
+
+- **ItemAlign.Stretch**: The items are stretched along the cross axis. If no constraints are set, the items are stretched to fill the size of the container on the cross axis.
+  
+  ```
+  Flex({ alignItems: ItemAlign.Stretch }) {  
+    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
+    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
+    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .size({width: '90%', height: 80})
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001218739570](figures/en-us_image_0000001218739570.png)
+
+- **ItemAlign.Baseline**: The items are aligned at the baseline of the cross axis.
+  
+  ```
+  Flex({ alignItems: ItemAlign.Baseline }) {  
+    Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
+    Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
+    Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
+  }
+  .size({width: '90%', height: 80})
+  .padding(10)
+  .backgroundColor(0xAFEEEE)
+  ```
+
+  ![en-us_image_0000001263019463](figures/en-us_image_0000001263019463.png)
+
+
+### Content Alignment
+
+Use the **alignContent** parameter to set how content items are aligned within the flex container along the cross axis.
+
+- **FlexAlign.Start**: The items are packed to the start of the container.
+
+- **FlexAlign.Center**: The items are packed to the center of the container.
+
+- **FlexAlign.End**: The items are packed to the end of the container.
+
+- **FlexAlign.SpaceBetween**: The items are evenly distributed; the first item is aligned with the main-start while the last one is aligned with the main-end.
+
+- **FlexAlign.SpaceAround**: The items are evenly distributed, with the space between the item and the main-start and between the item and the main-end equals half of the space between adjacent items.
+
+- **FlexAlign.SpaceEvenly**: The items are evenly distributed, with the space between the item and the main-start and between the item and the main-end equals the space between adjacent items.
+
+
+## Example Scenario
+
+In this example, a flex layout is designed to achieve the following effects: The child components are laid out horizontally on a single line, even when the total width of the child components exceeds the width of the container; the child components are horizontally aligned at both ends and vertically aligned toward the center of the container; the space is evenly divided by the child components except for the start and end ones.
+
+```
+@Entry
+@Component
+struct FlexExample {
+  build() {
+    Column() {
+      Column({ space: 5 }) {
+        Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
+          Text('1').width('30%').height(50).backgroundColor(0xF5DEB3)
+          Text('2').width('30%').height(50).backgroundColor(0xD2B48C)
+          Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)
+        }
+        .height(70)
+        .width('90%')
+        .padding(10)
+        .backgroundColor(0xAFEEEE)
+      }.width('100%').margin({ top: 5 })
+    }.width('100%') 
+ }
+}
+```
+
+
+![en-us_image_0000001261605867](figures/en-us_image_0000001261605867.png)
diff --git a/en/application-dev/ui/ui-ts-layout-grid-container.md b/en/application-dev/ui/ui-ts-layout-grid-container.md
new file mode 100644
index 0000000000000000000000000000000000000000..c1e16b6db398b07d7edfd8b4551853709f73d3e2
--- /dev/null
+++ b/en/application-dev/ui/ui-ts-layout-grid-container.md
@@ -0,0 +1,151 @@
+# Grid Layout
+
+
+As a tool to provide layout auxiliary lines, the grid system is handy in graphic and website design. When employed in the UI design of mobile devices, the grid system exhibits the following advantages:
+
+
+1. Provides rules for layout design and resolves issues of dynamic layout across devices with different sizes.
+2. Provides a unified positioning method for the system to ensure layout consistency among modules on different devices.
+3. Provides a flexible spacing adjustment method for applications to keep up with layout in special scenarios.
+
+To implement the grid layout, the declarative paradigm provides the \<GridContainer> component, together with the universal attribute useSizeType of its child components.
+
+## Grid System
+
+The grid system works in terms of columns, margins, and gutters.
+
+
+![en-us_image_0000001217236574](figures/en-us_image_0000001217236574.png)
+
+
+1. Gutters:
+   Spacing between elements. You can define different clutter values for different device sizes as part of the overall grid layout specifications. For better results, make sure the gutter is not greater than the margin.
+2. Margins:
+   Spacing around an item in the grid container. You can define different margin values for different device sizes as part of the overall grid layout specifications.
+3. Columns:
+   Main tool for positioning items in the grid layout. The grid container is divided into different columns based on the device size. The width of each column is calculated based on the total number of columns while respecting the margin and clutter specifications.
+
+
+### Grid Breakpoints
+
+Breakpoints in the grid system are set in terms of the device's screen pixel density. The grid system defines a set of breakpoint rules based on the mapping between the numbers of columns and device screen widths.
+
+Depending on the screen width, devices are classified into different width types. The table below provides the mappings of the grid breakpoint ranges, device width types, default total number of columns, margins, and gutters.
+
+<a id="grid_system_define">Grid layout</a>
+
+
+| Grid Breakpoint Range| Device Width Type| Description| Columns| Gutter| Margin|
+| -------- | -------- | -------- | -------- | -------- | -------- |
+| 0 &lt; Device screen width &lt; 320 vp | XS | Device of the minimum size.| 2 | 12 vp| 12 vp|
+| 320 vp &lt;= Device screen width &lt; 600 vp| SM | Small-sized device.| 4 | 24 vp| 24 vp|
+| 600 vp lt;= Device screen width lt;840 vp| MD | Medium-sized device.| 8 | 24 vp| 32 vp|
+| 840 vp &lt;= Device screen width| LG | Large-sized device.| 12 | 24 vp| 48 vp|
+
+## Usage
+
+Create a grid container, define the grid layout, and set the number of columns for child components in the grid container under different device width types.
+
+### Creating a Grid Container
+
+Use the **GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})** API to create a grid container. All child components in the grid container follow the grid layout.
+
+Use the **columns**, **gutter**, and **margin** parameters to define your grid layout. In the sample below, the grid container is divided into six columns, with the gutter (spacing between columns) of 10 vp and the margin (spacing around a column) of 20 vp.
+```
+GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
+```
+In the sample below, the grid container does not have any parameter set. In this case, it follows the default layout, as in the case when sizeType is set to SizeType.Auto.
+
+```
+GridContainer() {}
+```
+On a small-sized device (**SizeType.SM**), the grid container is divided into four columns by default, with the gutter of 24 vp and the margin of 24 vp. On a medium-sized device (**SizeType.MD**), the grid container is divided into eight columns by default, with the gutter of 24 vp and the margin of 32 vp.
+
+
+
+You can also use **sizeType** to configure child components in the grid container to follow the grid settings for a specific device width type, as shown below:
+
+```
+GridContainer({ sizeType: SizeType.SM) {
+   Row() {
+     Text('1')
+       .useSizeType({
+         xs: { span: 2},
+         sm: { span: 3, offset: 1 },
+         md: { span: 6, offset: 2 },
+         lg: { span: 8, offset: 2 },
+       })
+   }
+}
+```
+In the preceding example, the **\<Text>** component uses the grid setting of the **SizeType.SM** type regardless of the actual width type of the device. That is, the **\<Text>** component occupies three columns and is placed in the first column.
+
+### Grid Settings of Child Components in the Grid Container
+
+Use the universal attribute **useSizeType** to configure the positioning of child components in the grid container. span indicates the number of columns occupied by the child component. offset indicates the column offset, that is, the column where the component is located. The sample code is as follows:
+
+```
+GridContainer() {
+   Row() {
+     Text('1')
+       .useSizeType({
+         xs: { span: 2},
+         sm: { span: 3, offset: 1 },
+         md: { span: 6, offset: 2 },
+         lg: { span: 8, offset: 2 },
+       })
+   }
+}
+```
+In the preceding example, **sm: { span: 2, offset: 0 }** indicates that on a medium-sized device, the **\<Text>** component occupies three columns and is placed in the first column of the grid container.
+## Example Scenario
+
+The grid layout helps ensure proper display of components among different device width types, eliminating the hassle of writing a large amount of code for device compatibility. 
+
+```
+@Entry
+@Component
+struct GridContainerExample {
+  build() {
+    Column({ space: 5 }) {
+      GridContainer({ columns: 6, sizeType: SizeType.Auto, gutter: 10, margin: 20 }) {
+        Row() {
+          Text('1')
+            .useSizeType({
+              xs: { span: 2, offset: 0 },
+              sm: { span: 2, offset: 0 },
+              md: { span: 1, offset: 0 },
+              lg: { span: 1, offset: 0 },
+            })
+            .height(100).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
+          Text('2')
+            .useSizeType({
+              xs: { span: 2, offset: 2 },
+              sm: { span: 2, offset: 2 },
+              md: { span: 4, offset: 1 },
+              lg: { span: 4, offset: 1 },
+            })
+            .height(100).backgroundColor(0x46F2B4).textAlign(TextAlign.Center)
+          Text('3')   
+            .useSizeType({
+              xs: { span: 2, offset: 4 },
+              sm: { span: 2, offset: 4 },
+              md: { span: 1, offset: 5 },
+              lg: { span: 1, offset: 5 },
+            })
+            .height(100).backgroundColor(0x46A2B4).textAlign(TextAlign.Center)
+        }
+      }.width('80%').backgroundColor('gray')
+    }.width('100%').margin({ top: 15 })
+  }
+}
+```
+
+
+
+Effect on a small-sized device (**SizeType.SM**):
+
+![en-us_image_0000001218108718](figures/en-us_image_0000001218108718.png)
+
+Effect on a medium-sized device (**SizeType.MD**):
+![en-us_image_0000001262748569](figures/en-us_image_0000001262748569.png)
diff --git a/en/application-dev/ui/ui-ts-layout-mediaquery.md b/en/application-dev/ui/ui-ts-layout-mediaquery.md
new file mode 100644
index 0000000000000000000000000000000000000000..32238aa4870e6176b7cde46e28e8be830b7d35be
--- /dev/null
+++ b/en/application-dev/ui/ui-ts-layout-mediaquery.md
@@ -0,0 +1,145 @@
+# Media Query
+
+
+Media queries are widely used on mobile devices. You can use them to modify the application style based on the device type or specific features and device parameters (such as the screen resolution). Specifically, media queries allow you to:
+
+
+1. Design a layout style based on the device and app attributes.
+
+2. Update the page layout to adapt to dynamic screen changes (for example, screen splitting or switching between landscape and portrait modes).
+
+
+## Usage
+
+Invoke the **mediaquery** API to set the media query condition and the callback, and change the page layout or implement service logic in the callback corresponding to the condition.
+
+First, import the mediaquery module, as shown below:
+```
+  import mediaquery from '@ohos.mediaquery'
+```
+Then, use the **matchMediaSync** API to set the media query condition and save the returned listener, as shown below:
+```
+  listener = mediaquery.matchMediaSync('(orientation: landscape)')
+```
+Finally, register the callback using the saved listener, and change the page layout or implement service logic in the callback. When the media query condition is matched, the callback is triggered. The sample code is as follows:
+```
+onPortrait(mediaQueryResult) {
+    if (mediaQueryResult.matches) {
+        // do something here
+    } else {
+        // do something here
+    }
+}
+listener.on('change', onPortrait)
+```
+
+## Syntax of Media Query Conditions
+```
+[media-type] [and|not|only] [(media-feature)]
+```
+Examples are as follows:
+screen and (round-screen: true) // This condition is met when the device screen is round.
+(max-height: 800) // The condition is met when the height is less than 800.
+(height &lt;= 800) // The condition is met when the height is less than 800.
+screen and (device-type: tv) or (resolution &lt; 2) // This is a multi-condition complex statement query containing multiple media features.
+
+###  media-type
+
+  | Type| Description| 
+| -------- | -------- |
+| screen | Media query based on screen-related parameters.| 
+
+
+### Media Logic Operation (and|not|only)
+
+You can use logical operators (**and**, **or**, **not**, and **only**) to compose complex media queries. You can also combine them using comma (,). The following table describes the operators.
+
+  **Table 1** Media logical operators
+
+| Type| Description| 
+| -------- | -------- |
+| and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.<br>For example, **screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;** indicates that the query is valid when the device type is wearable and the maximum height of the application is 600 pixel units.| 
+| not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.<br>For example, **not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;** indicates that the query is valid when the height of the application is less than 50 pixel units or greater than 600 pixel units.<br>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE**<br>>&nbsp;When the **not** operator is used, the media type must be specified.| 
+| only | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:<br>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br>The browsers of earlier versions would mislead this sentence into screen, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.<br>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**NOTE**<br>>&nbsp;When the **only** operator is used, the media type must be specified.| 
+| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.<br>For example, **screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;(round-screen: true)&nbsp;** indicates that the query is valid when the minimum height of the application is 1000 pixel units or the device screen is round.| 
+| or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.<br>For example, **screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;(round-screen: true)** indicates that the query is valid when the maximum height of the application is 1000 pixel units or the device screen is round.| 
+
+At MediaQuery Level 4, range query is imported so that you can use the operators including &lt;=, &gt;=, &lt;, and &gt; besides the **max-** and **min-** operators.
+
+  **Table 2** Logical operators for range query
+
+| Type| Description| 
+| -------- | -------- |
+| &lt;= | Less than or equal to, for example, **screen&nbsp;and&nbsp;(50&nbsp;&lt;=&nbsp;height)**.| 
+| &gt;= | Greater than or equal to, for example, **screen&nbsp;and&nbsp;(600&nbsp;&gt;=&nbsp;height)**.| 
+| &lt; | Less than, for example, **screen&nbsp;and&nbsp;(50&nbsp;&lt;&nbsp;height)**.| 
+| &gt; | Greater than, for example, **screen&nbsp;and&nbsp;(600&nbsp;&gt;&nbsp;height)**.| 
+
+
+### media-feature
+
+  | Type| Description| 
+| -------- | -------- |
+| height | Height of the display area on the application page.| 
+| min-height | Minimum height of the display area on the application page.| 
+| max-height | Maximum height of the display area on the application page.| 
+| width | Width of the display area on the app page.| 
+| min-width | Minimum width of the display area on the application page.| 
+| max-width | Maximum width of the display area on the application page.| 
+| resolution | Resolution of the device. The unit can be dpi, dppx, or dpcm.<br>-&nbsp;**dpi** indicates the number of physical pixels per inch. 1 dpi ≈ 0.39 dpcm.<br>-&nbsp;**dpcm** indicates the number of physical pixels per centimeter. 1 dpcm&nbsp;≈&nbsp;2.54 dpi.<br>-&nbsp;**dppx** indicates the number of physical pixels in each pixel. (This unit is calculated based on this formula: 96 px = 1 inch, which is different from the calculation method of the px unit on the page.) 1 dppx&nbsp;=&nbsp;96 dpi.| 
+| min-resolution | Minimum device resolution.| 
+| max-resolution | Maximum device resolution.| 
+| orientation | Screen orientation.<br>Options are as follows:<br>-&nbsp;orientation:&nbsp;portrait<br>-&nbsp;orientation:&nbsp;landscape|
+| device-height | Height of the device.| 
+| min-device-height | Minimum height of the device.| 
+| max-device-height | Maximum height of the device.| 
+| device-width | Width of the device.| 
+| min-device-width | Minimum width of the device.| 
+| max-device-width | Maximum width of the device.|
+| round-screen | Screen type. The value **true** means that the screen is round, and **false** means the opposite.| 
+| dark-mode | Whether the device is in dark mode. The value **true** means that the device is in dark mode, and **false** means the opposite.| 
+
+## Example Scenario
+
+Use media queries to apply different content and styles to the page text when the screen is switched between landscape and portrait modes.
+
+  ```
+  import mediaquery from '@ohos.mediaquery'
+  let portraitFunc = null
+  
+  @Entry
+  @Component
+  struct MediaQueryExample {
+    @State color: string = '#DB7093'
+    @State text: string = 'Portrait'
+    @State fontSize: number = 24
+    listener = mediaquery.matchMediaSync('(orientation: landscape)')
+  
+    onPortrait(mediaQueryResult) {
+      if (mediaQueryResult.matches) {
+        this.color = '#FFD700'
+        this.text = 'Landscape'
+      } else {
+        this.color = '#DB7093'
+        this.text = 'Portrait'
+      }
+    }
+  
+    aboutToAppear() {
+      portraitFunc = this.onPortrait.bind(this) //bind current js instance
+      this.listener.on('change', portraitFunc)
+    }
+  
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Text(this.text).fontSize(50).fontColor(this.color)
+      }
+      .width('100%').height('100%')
+    }
+  }
+  ```
+When the device is in landscape orientation, the text content is displayed in landscape mode in the color of #FFD700.<br/>
+![zh-cn_image_0000001262954829](figures/zh-cn_image_0000001262954829.png)
+
+When the device is not in landscape orientation, the text content is displayed in portrait mode in the color of #DB7093.<br/>
+![en-us_image_0000001263074739](figures/en-us_image_0000001263074739.png)