!1309 fix ：Column和Row文档

Merge pull request !1309 from zhongyuyan/master

zh-cn/application-dev/reference/arkui-ts/ts-container-column.md

@@ -46,6 +46,7 @@ Column\(value:\{space?: Length\}\)
     </table>
 
 
+
 ## 属性<a name="section358284262918"></a>
 
 <table><thead align="left"><tr><th class="cellrowborder" valign="top" width="13%" id="mcps1.1.5.1.1"><p>名称</p>
@@ -68,6 +69,16 @@ Column\(value:\{space?: Length\}\)
 </td>
 </tr>
 </tbody>
+<tbody><tr><td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.5.1.1 "><p>justifyContent<sup>8+</sup></p>
+</td>
+<td class="cellrowborder" valign="top" width="19%" headers="mcps1.1.5.1.2 "><p><a href="ts-container-flex.md#li1540916112452">FlexAlign</a></p>
+</td>
+<td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.5.1.3 "><p>Start</p>
+</td>
+<td class="cellrowborder" valign="top" width="59%" headers="mcps1.1.5.1.4 "><p>设置子组件在垂直方向上的对齐格式。</p>
+</td>
+</tr>
+</tbody>
 </table>
 
 -   <a name="li8105435144314"></a>HorizontalAlign枚举说明
@@ -104,28 +115,39 @@ Column\(value:\{space?: Length\}\)
 @Component
 struct ColumnExample {
   build() {
-    Column({ space: 5 }) {
     Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
         Column({ space: 5 }) {
-        Column().width('100%').height(50).backgroundColor(0xAFEEEE)
-        Column().width('100%').height(50).backgroundColor(0x00FFFF)
-      }.width('90%').height(107).border({ width: 1 })
+          Column().width('100%').height(30).backgroundColor(0xAFEEEE)
+          Column().width('100%').height(30).backgroundColor(0x00FFFF)
+        }.width('90%').height(100).border({ width: 1 })
 
         Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
         Column() {
-        Column().width('50%').height(50).backgroundColor(0xAFEEEE)
-        Column().width('50%').height(50).backgroundColor(0x00FFFF)
+          Column().width('50%').height(30).backgroundColor(0xAFEEEE)
+          Column().width('50%').height(30).backgroundColor(0x00FFFF)
         }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
 
         Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
         Column() {
-        Column().width('50%').height(50).backgroundColor(0xAFEEEE)
-        Column().width('50%').height(50).backgroundColor(0x00FFFF)
+          Column().width('50%').height(30).backgroundColor(0xAFEEEE)
+          Column().width('50%').height(30).backgroundColor(0x00FFFF)
         }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
+
+        Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+        Column() {
+          Column().width('30%').height(30).backgroundColor(0xAFEEEE)
+          Column().width('30%').height(30).backgroundColor(0x00FFFF)
+        }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center)
+
+        Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+        Column() {
+          Column().width('30%').height(30).backgroundColor(0xAFEEEE)
+          Column().width('30%').height(30).backgroundColor(0x00FFFF)
+        }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.End)
     }.width('100%').padding({ top: 5 })
   }
 }
 ```
 
-![](figures/column.gif)
+![](figures/Column.png)
 

zh-cn/application-dev/reference/arkui-ts/ts-container-row.md

@@ -68,6 +68,16 @@ Row\(value:\{space?: Length\}\)
 </td>
 </tr>
 </tbody>
+<tbody><tr><td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.5.1.1 "><p>justifyContent<sup>8+</sup></p>
+</td>
+<td class="cellrowborder" valign="top" width="19%" headers="mcps1.1.5.1.2 "><p><a href="ts-container-flex.md#li1540916112452">FlexAlign</a></p>
+</td>
+<td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.5.1.3 "><p>Start</p>
+</td>
+<td class="cellrowborder" valign="top" width="59%" headers="mcps1.1.5.1.4 "><p>设置子组件在水平方向上的对齐格式。</p>
+</td>
+</tr>
+</tbody>
 </table>
 
 -   VerticalAlign枚举说明
@@ -107,26 +117,38 @@ struct RowExample {
   build() {
     Column({ space: 5 }) {
       Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
-      Row({ space: 20 }) {
-        Row().width(150).height(50).backgroundColor(0xAFEEEE)
-        Row().width(150).height(50).backgroundColor(0x00FFFF)
-      }.width(321).height(52).border({ width: 1 })
+        Row({ space: 5 }) {
+          Row().width('30%').height(50).backgroundColor(0xAFEEEE)
+          Row().width('30%').height(50).backgroundColor(0x00FFFF)
+        }.width('90%').height(107).border({ width: 1 })
 
-      Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+        Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%')
         Row() {
-        Row().width('50%').height(50).backgroundColor(0xAFEEEE)
-        Row().width('50%').height(50).backgroundColor(0x00FFFF)
-      }.alignItems(VerticalAlign.Bottom).width('90%').height(100).border({ width: 1 })
+          Row().width('30%').height(50).backgroundColor(0xAFEEEE)
+          Row().width('30%').height(50).backgroundColor(0x00FFFF)
+        }.alignItems(VerticalAlign.Top).height('15%').border({ width: 1 })
 
-      Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+        Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+        Row() {
+          Row().width('30%').height(50).backgroundColor(0xAFEEEE)
+          Row().width('30%').height(50).backgroundColor(0x00FFFF)
+        }.alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
+
+        Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+        Row() {
+          Row().width('30%').height(50).backgroundColor(0xAFEEEE)
+          Row().width('30%').height(50).backgroundColor(0x00FFFF)
+        }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
+
+        Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
         Row() {
-        Row().width('50%').height(50).backgroundColor(0xAFEEEE)
-        Row().width('50%').height(50).backgroundColor(0x00FFFF)
-      }.alignItems(VerticalAlign.Top).width('90%').height(100).border({ width: 1 })
+          Row().width('30%').height(50).backgroundColor(0xAFEEEE)
+          Row().width('30%').height(50).backgroundColor(0x00FFFF)
+        }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
     }.width('100%')
   }
 }
 ```
 
-![](figures/row.png)
+![](figures/Row.png)