update ts-basic-components-checkboxgroup.md (7716)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md

@@ -58,29 +58,44 @@ struct CheckboxExample {
   build() {
     Scroll() {
       Column() {
-        CheckboxGroup({group : 'checkboxGroup'})
-          .selectedColor(0xed6f21)
-          .onChange((itemName:CheckboxGroupResult) => {
-            console.info("TextPicker::dialogResult is" + JSON.stringify(itemName))
-          })
-        Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
-          .select(true)
-          .selectedColor(0x39a2db)
-          .onChange((value: boolean) => {
-            console.info('Checkbox1 change is' + value)
-          })
-        Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
-          .select(false)
-          .selectedColor(0x39a2db)
-          .onChange((value: boolean) => {
-            console.info('Checkbox2 change is' + value)
-          })
-        Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
-          .select(true)
-          .selectedColor(0x39a2db)
-          .onChange((value: boolean) => {
-            console.info('Checkbox3 change is' + value)
-          })
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+          CheckboxGroup({ group: 'checkboxGroup' })
+            .selectedColor(0xed6f21)
+            .onChange((itemName: CheckboxGroupResult) => {
+              console.info("TextPicker::dialogResult is" + JSON.stringify(itemName))
+            })
+          Text('select all').fontSize(20)
+        }
+
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+          Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
+            .select(true)
+            .selectedColor(0x39a2db)
+            .onChange((value: boolean) => {
+              console.info('Checkbox1 change is' + value)
+            })
+          Text('Checkbox1').fontSize(20)
+        }
+
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+          Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
+            .select(false)
+            .selectedColor(0x39a2db)
+            .onChange((value: boolean) => {
+              console.info('Checkbox2 change is' + value)
+            })
+          Text('Checkbox2').fontSize(20)
+        }
+
+        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
+          Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
+            .select(true)
+            .selectedColor(0x39a2db)
+            .onChange((value: boolean) => {
+              console.info('Checkbox3 change is' + value)
+            })
+          Text('Checkbox3').fontSize(20)
+        }
       }
     }
   }