diff --git a/zh-cn/application-dev/ui/ui-ts-layout-flex.md b/zh-cn/application-dev/ui/ui-ts-layout-flex.md
index 0921f7a67a62f53eb52cec5d72cd6d890071d2cf..3d33681082d1dc1014a17a4a9dae262a7a9e359f 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-flex.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-flex.md
@@ -27,9 +27,9 @@
 
     ```ts
     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)
+      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%')
@@ -42,9 +42,9 @@
 
     ```ts
     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)
+      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%')
@@ -58,9 +58,9 @@
 
     ```ts
     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)
+      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%')
@@ -74,9 +74,9 @@
 
     ```ts
     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)
+      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%')
@@ -94,9 +94,9 @@
 
     ```ts
     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)
+      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)
@@ -109,9 +109,9 @@
 
     ```ts
     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)
+      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)
@@ -124,9 +124,9 @@
 
     ```ts
     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)
+      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)
@@ -147,9 +147,9 @@
 
     ```ts
     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)
+      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({ top: 10, bottom: 10 })
@@ -162,9 +162,9 @@
 
     ```ts
     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)
+      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({ top: 10, bottom: 10 })
@@ -177,9 +177,9 @@
 
     ```ts
     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)
+      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({ top: 10, bottom: 10 })
@@ -192,9 +192,9 @@
 
     ```ts
     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)
+      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({ top: 10, bottom: 10 })
@@ -207,9 +207,9 @@
 
     ```ts
     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)
+      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({ top: 10, bottom: 10 })
@@ -222,9 +222,9 @@
 
     ```ts
     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)
+      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({ top: 10, bottom: 10 })
@@ -244,9 +244,9 @@
 
     ```ts
     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)
+      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)
@@ -259,9 +259,9 @@
 
     ```ts
     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)
+      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)
@@ -274,9 +274,9 @@
 
     ```ts
     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)
+      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)
@@ -289,9 +289,9 @@
 
     ```ts
     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)
+      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)
@@ -304,9 +304,9 @@
 
     ```ts
     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)
+      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)
@@ -319,9 +319,9 @@
 
     ```ts
     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)
+      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)
@@ -364,13 +364,13 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
 
 - FlexAlign.Start: 子组件各行与交叉轴起点对齐。
 
-    ```
+    ```ts
     Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
-    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
-    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
-    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+      Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+      Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+      Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
     }
     .width('90%')
     .height(100)
@@ -383,11 +383,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
 
     ```ts
     Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) {
-    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
-    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
-    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+      Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+      Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+      Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
     }
     .width('90%')
     .height(100)
@@ -400,11 +400,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
 
     ```ts
     Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) {
-    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
-    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
-    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+      Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+      Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+      Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
     }
     .width('90%')
     .height(100)
@@ -417,11 +417,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
 
     ```ts
     Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) {
-    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
-    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
-    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+      Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+      Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+      Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
     }
     .width('90%')
     .height(100)
@@ -434,11 +434,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
 
     ```ts
     Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
-    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
-    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
-    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+      Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+      Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+      Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
     }
     .width('90%')
     .height(100)
@@ -451,11 +451,11 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器
 
     ```ts
     Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
-    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
-    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
-    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
-    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+      Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+      Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+      Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+      Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
     }
     .width('90%')
     .height(100)
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
index 8207fc431438d1261739a644a96ca8b28ab1ad0c..100c4896116baa774b4f608a2764c356b5feef0c 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
@@ -117,36 +117,37 @@ listener.on('change', onPortrait)
 
 ```ts
 import mediaquery from '@ohos.mediaquery'
+
 let portraitFunc = null
 
 @Entry
 @Component
 struct MediaQueryExample {
-@State color: string = '#DB7093'
-@State text: string = 'Portrait'
-listener = mediaquery.matchMediaSync('(orientation: landscape)')  // 当设备横屏时条件成立
+  @State color: string = '#DB7093'
+  @State text: string = 'Portrait'
+  listener = mediaquery.matchMediaSync('(orientation: landscape)') // 当设备横屏时条件成立
 
-onPortrait(mediaQueryResult) {
-  if (mediaQueryResult.matches) {
-    this.color = '#FFD700'
-    this.text = 'Landscape'
-  } else {
-    this.color = '#DB7093'
-    this.text = 'Portrait'
+  onPortrait(mediaQueryResult) {
+    if (mediaQueryResult.matches) {
+      this.color = '#FFD700'
+      this.text = 'Landscape'
+    } else {
+      this.color = '#DB7093'
+      this.text = 'Portrait'
+    }
   }
-}
 
-aboutToAppear() {
-  portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例
-  this.listener.on('change', portraitFunc)  
-}
+  aboutToAppear() {
+    portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例
+    this.listener.on('change', portraitFunc)
+  }
 
-build() {
-  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-    Text(this.text).fontSize(50).fontColor(this.color)
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Text(this.text).fontSize(50).fontColor(this.color)
+    }
+    .width('100%').height('100%')
   }
-  .width('100%').height('100%')
-}
 }
 ```
 
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-stack.md b/zh-cn/application-dev/ui/ui-ts-layout-stack.md
index ef1c4fa865d1aef6cff7d237b8ef0cea9e47733d..63904bd277cea803b4c9147ebf618be26e561d02 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-stack.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-stack.md
@@ -28,13 +28,13 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar
 
     ```ts
     Stack({ alignContent: Alignment.BottomStart }) {
-        Column(){
+        Column() {
           Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
         }.width(100).height(100).backgroundColor(0xffd306)
-        Column(){
+        Column() {
           Text('Stack子元素2').fontSize(20)
         }.width(150).height(150).backgroundColor(Color.Pink)
-        Column(){
+        Column() {
           Text('Stack子元素3').fontSize(20)
         }.width(200).height(200).backgroundColor(Color.Grey)
     }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
@@ -46,13 +46,13 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar
 
     ```ts
     Stack({ alignContent: Alignment.BottomStart }) {
-        Column(){
+        Column() {
           Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
         }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)
-        Column(){
+        Column() {
           Text('Stack子元素2').fontSize(20)
         }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)
-        Column(){
+        Column() {
           Text('Stack子元素3').fontSize(20)
         }.width(200).height(200).backgroundColor(Color.Grey)
     }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)