1# divider<a name="EN-US_TOPIC_0000001162494605"></a> 2 3- [Permission List](#en-us_topic_0000001059340510_section11257113618419) 4- [Child Component](#en-us_topic_0000001059340510_section9288143101012) 5- [Attribute](#en-us_topic_0000001059340510_section2907183951110) 6- [Event](#en-us_topic_0000001059340510_section1398020714187) 7- [Style](#en-us_topic_0000001059340510_section5775351116) 8- [Example](#en-us_topic_0000001059340510_section230641814493) 9 10The **<divider\>** component is used to separate content blocks and content elements. It can be used for the list or UI layout. 11 12## Permission List<a name="en-us_topic_0000001059340510_section11257113618419"></a> 13 14None 15 16## Child Component<a name="en-us_topic_0000001059340510_section9288143101012"></a> 17 18Not supported 19 20## Attribute<a name="en-us_topic_0000001059340510_section2907183951110"></a> 21 22<a name="en-us_topic_0000001059340510_table20633101642315"></a> 23<table><thead align="left"><tr id="en-us_topic_0000001059340510_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a>Name</p> 24</th> 25<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a>Type</p> 26</th> 27<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a>Default Value</p> 28</th> 29<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001059340510_p824610360217"><a name="en-us_topic_0000001059340510_p824610360217"></a><a name="en-us_topic_0000001059340510_p824610360217"></a>Mandatory</p> 30</th> 31<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a>Description</p> 32</th> 33</tr> 34</thead> 35<tbody><tr id="en-us_topic_0000001059340510_row14446349178"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_p15694934121713"><a name="en-us_topic_0000001059340510_p15694934121713"></a><a name="en-us_topic_0000001059340510_p15694934121713"></a>vertical</p> 36</td> 37<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_p0694434171720"><a name="en-us_topic_0000001059340510_p0694434171720"></a><a name="en-us_topic_0000001059340510_p0694434171720"></a>boolean</p> 38</td> 39<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_p2694103415179"><a name="en-us_topic_0000001059340510_p2694103415179"></a><a name="en-us_topic_0000001059340510_p2694103415179"></a>false</p> 40</td> 41<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p13694103471711"><a name="en-us_topic_0000001059340510_p13694103471711"></a><a name="en-us_topic_0000001059340510_p13694103471711"></a>No</p> 42</td> 43<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p1769433401719"><a name="en-us_topic_0000001059340510_p1769433401719"></a><a name="en-us_topic_0000001059340510_p1769433401719"></a>Whether to use the vertical divider. The default value is <strong id="en-us_topic_0000001059340510_b8204122145214"><a name="en-us_topic_0000001059340510_b8204122145214"></a><a name="en-us_topic_0000001059340510_b8204122145214"></a>false</strong>, indicating that the horizontal divider is used.</p> 44</td> 45</tr> 46<tr id="en-us_topic_0000001059340510_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a>id</p> 47</td> 48<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a>string</p> 49</td> 50<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a>-</p> 51</td> 52<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p42461736102118"><a name="en-us_topic_0000001059340510_p42461736102118"></a><a name="en-us_topic_0000001059340510_p42461736102118"></a>No</p> 53</td> 54<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a>Unique ID of a component.</p> 55</td> 56</tr> 57<tr id="en-us_topic_0000001059340510_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a>style</p> 58</td> 59<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a>string</p> 60</td> 61<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a>-</p> 62</td> 63<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p17246836142119"><a name="en-us_topic_0000001059340510_p17246836142119"></a><a name="en-us_topic_0000001059340510_p17246836142119"></a>No</p> 64</td> 65<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a>Style declaration of a component.</p> 66</td> 67</tr> 68<tr id="en-us_topic_0000001059340510_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a>class</p> 69</td> 70<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a>string</p> 71</td> 72<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a>-</p> 73</td> 74<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p324614367213"><a name="en-us_topic_0000001059340510_p324614367213"></a><a name="en-us_topic_0000001059340510_p324614367213"></a>No</p> 75</td> 76<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a>Style class of a component, which is used to refer to a style table.</p> 77</td> 78</tr> 79<tr id="en-us_topic_0000001059340510_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p1786251117156"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p1786251117156"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p1786251117156"></a>ref</p> 80</td> 81<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p1086241119157"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p1086241119157"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p1086241119157"></a>string</p> 82</td> 83<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p586281111151"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p586281111151"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p586281111151"></a>-</p> 84</td> 85<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p1624612362219"><a name="en-us_topic_0000001059340510_p1624612362219"></a><a name="en-us_topic_0000001059340510_p1624612362219"></a>No</p> 86</td> 87<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p113416153342"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p113416153342"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ph5815920163518"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ph5815920163518"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ph5815920163518"></a> or child components</span>. The reference information is registered with the parent component on <strong id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_b08212202354"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_b08212202354"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_b08212202354"></a>$refs</strong>.</p> 88</td> 89</tr> 90<tr id="en-us_topic_0000001059340510_row1263451617236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a>data</p> 91</td> 92<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a>string</p> 93</td> 94<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a>-</p> 95</td> 96<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p22471736132114"><a name="en-us_topic_0000001059340510_p22471736132114"></a><a name="en-us_topic_0000001059340510_p22471736132114"></a>No</p> 97</td> 98<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a><a name="en-us_topic_0000001059340510_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a>Attribute set for a component to facilitate data storage and reading.</p> 99</td> 100</tr> 101</tbody> 102</table> 103 104## Event<a name="en-us_topic_0000001059340510_section1398020714187"></a> 105 106Not supported 107 108## Style<a name="en-us_topic_0000001059340510_section5775351116"></a> 109 110<a name="en-us_topic_0000001059340510_table156669187471"></a> 111<table><thead align="left"><tr id="en-us_topic_0000001059340510_row966601820476"><th class="cellrowborder" valign="top" width="19.038096190380962%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001059340510_p1366616188472"><a name="en-us_topic_0000001059340510_p1366616188472"></a><a name="en-us_topic_0000001059340510_p1366616188472"></a>Name</p> 112</th> 113<th class="cellrowborder" valign="top" width="23.847615238476152%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001059340510_p26661418194711"><a name="en-us_topic_0000001059340510_p26661418194711"></a><a name="en-us_topic_0000001059340510_p26661418194711"></a>Type</p> 114</th> 115<th class="cellrowborder" valign="top" width="12.118788121187881%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001059340510_p36661718194710"><a name="en-us_topic_0000001059340510_p36661718194710"></a><a name="en-us_topic_0000001059340510_p36661718194710"></a>Default Value</p> 116</th> 117<th class="cellrowborder" valign="top" width="8.269173082691731%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001059340510_p16666141812475"><a name="en-us_topic_0000001059340510_p16666141812475"></a><a name="en-us_topic_0000001059340510_p16666141812475"></a>Mandatory</p> 118</th> 119<th class="cellrowborder" valign="top" width="36.72632736726327%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001059340510_p16667718174712"><a name="en-us_topic_0000001059340510_p16667718174712"></a><a name="en-us_topic_0000001059340510_p16667718174712"></a>Description</p> 120</th> 121</tr> 122</thead> 123<tbody><tr id="en-us_topic_0000001059340510_row186671218144718"><td class="cellrowborder" valign="top" width="19.038096190380962%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_p666720180479"><a name="en-us_topic_0000001059340510_p666720180479"></a><a name="en-us_topic_0000001059340510_p666720180479"></a>margin</p> 124</td> 125<td class="cellrowborder" valign="top" width="23.847615238476152%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_p666714189478"><a name="en-us_topic_0000001059340510_p666714189478"></a><a name="en-us_topic_0000001059340510_p666714189478"></a><length></p> 126</td> 127<td class="cellrowborder" valign="top" width="12.118788121187881%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_p18667181834719"><a name="en-us_topic_0000001059340510_p18667181834719"></a><a name="en-us_topic_0000001059340510_p18667181834719"></a>0</p> 128</td> 129<td class="cellrowborder" valign="top" width="8.269173082691731%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p9667171834720"><a name="en-us_topic_0000001059340510_p9667171834720"></a><a name="en-us_topic_0000001059340510_p9667171834720"></a>No</p> 130</td> 131<td class="cellrowborder" valign="top" width="36.72632736726327%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p8667191824717"><a name="en-us_topic_0000001059340510_p8667191824717"></a><a name="en-us_topic_0000001059340510_p8667191824717"></a>Shorthand attribute to set all margins in a declaration. You can set 1 to 4 values.</p> 132</td> 133</tr> 134<tr id="en-us_topic_0000001059340510_row1758549135917"><td class="cellrowborder" valign="top" width="19.038096190380962%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_a70939a36b2b04dd8bec21f5bddc8637e"><a name="en-us_topic_0000001059340510_a70939a36b2b04dd8bec21f5bddc8637e"></a><a name="en-us_topic_0000001059340510_a70939a36b2b04dd8bec21f5bddc8637e"></a>margin-[left|top|right|bottom]</p> 135</td> 136<td class="cellrowborder" valign="top" width="23.847615238476152%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_ae53ac9ac370d483990e04ea9789c1e49"><a name="en-us_topic_0000001059340510_ae53ac9ac370d483990e04ea9789c1e49"></a><a name="en-us_topic_0000001059340510_ae53ac9ac370d483990e04ea9789c1e49"></a><length></p> 137</td> 138<td class="cellrowborder" valign="top" width="12.118788121187881%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_a180cd037e6174e5c82f35a3a66b6f2ec"><a name="en-us_topic_0000001059340510_a180cd037e6174e5c82f35a3a66b6f2ec"></a><a name="en-us_topic_0000001059340510_a180cd037e6174e5c82f35a3a66b6f2ec"></a>0</p> 139</td> 140<td class="cellrowborder" valign="top" width="8.269173082691731%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_a487d09add6e54c5c89fa4f22e9318271"><a name="en-us_topic_0000001059340510_a487d09add6e54c5c89fa4f22e9318271"></a><a name="en-us_topic_0000001059340510_a487d09add6e54c5c89fa4f22e9318271"></a>No</p> 141</td> 142<td class="cellrowborder" valign="top" width="36.72632736726327%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p696123114464"><a name="en-us_topic_0000001059340510_p696123114464"></a><a name="en-us_topic_0000001059340510_p696123114464"></a>Shorthand attribute of the length type to set left, top, right, and bottom margins attributes. Its unit is px and default value is <strong id="en-us_topic_0000001059340510_b115244118529"><a name="en-us_topic_0000001059340510_b115244118529"></a><a name="en-us_topic_0000001059340510_b115244118529"></a>0</strong>.</p> 143</td> 144</tr> 145<tr id="en-us_topic_0000001059340510_row1487514596294"><td class="cellrowborder" valign="top" width="19.038096190380962%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_p71673109308"><a name="en-us_topic_0000001059340510_p71673109308"></a><a name="en-us_topic_0000001059340510_p71673109308"></a>color</p> 146</td> 147<td class="cellrowborder" valign="top" width="23.847615238476152%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_p516781011309"><a name="en-us_topic_0000001059340510_p516781011309"></a><a name="en-us_topic_0000001059340510_p516781011309"></a><color></p> 148</td> 149<td class="cellrowborder" valign="top" width="12.118788121187881%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_p416718104300"><a name="en-us_topic_0000001059340510_p416718104300"></a><a name="en-us_topic_0000001059340510_p416718104300"></a>#08000000</p> 150</td> 151<td class="cellrowborder" valign="top" width="8.269173082691731%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p1016741053017"><a name="en-us_topic_0000001059340510_p1016741053017"></a><a name="en-us_topic_0000001059340510_p1016741053017"></a>No</p> 152</td> 153<td class="cellrowborder" valign="top" width="36.72632736726327%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p116711013301"><a name="en-us_topic_0000001059340510_p116711013301"></a><a name="en-us_topic_0000001059340510_p116711013301"></a>Color of the divider.</p> 154</td> 155</tr> 156<tr id="en-us_topic_0000001059340510_row1055218083014"><td class="cellrowborder" valign="top" width="19.038096190380962%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_p10167710193019"><a name="en-us_topic_0000001059340510_p10167710193019"></a><a name="en-us_topic_0000001059340510_p10167710193019"></a>stroke-width</p> 157</td> 158<td class="cellrowborder" valign="top" width="23.847615238476152%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_p6167121093018"><a name="en-us_topic_0000001059340510_p6167121093018"></a><a name="en-us_topic_0000001059340510_p6167121093018"></a><length></p> 159</td> 160<td class="cellrowborder" valign="top" width="12.118788121187881%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_p31671010113017"><a name="en-us_topic_0000001059340510_p31671010113017"></a><a name="en-us_topic_0000001059340510_p31671010113017"></a>1</p> 161</td> 162<td class="cellrowborder" valign="top" width="8.269173082691731%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p3167181019303"><a name="en-us_topic_0000001059340510_p3167181019303"></a><a name="en-us_topic_0000001059340510_p3167181019303"></a>No</p> 163</td> 164<td class="cellrowborder" valign="top" width="36.72632736726327%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p13167101016307"><a name="en-us_topic_0000001059340510_p13167101016307"></a><a name="en-us_topic_0000001059340510_p13167101016307"></a>Width of the divider.</p> 165</td> 166</tr> 167<tr id="en-us_topic_0000001059340510_row56167193020"><td class="cellrowborder" valign="top" width="19.038096190380962%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_p161695103305"><a name="en-us_topic_0000001059340510_p161695103305"></a><a name="en-us_topic_0000001059340510_p161695103305"></a>display</p> 168</td> 169<td class="cellrowborder" valign="top" width="23.847615238476152%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_p34141720115716"><a name="en-us_topic_0000001059340510_p34141720115716"></a><a name="en-us_topic_0000001059340510_p34141720115716"></a>string</p> 170</td> 171<td class="cellrowborder" valign="top" width="12.118788121187881%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_p17169310133020"><a name="en-us_topic_0000001059340510_p17169310133020"></a><a name="en-us_topic_0000001059340510_p17169310133020"></a>flex</p> 172</td> 173<td class="cellrowborder" valign="top" width="8.269173082691731%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p3169101019308"><a name="en-us_topic_0000001059340510_p3169101019308"></a><a name="en-us_topic_0000001059340510_p3169101019308"></a>No</p> 174</td> 175<td class="cellrowborder" valign="top" width="36.72632736726327%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p1416912102303"><a name="en-us_topic_0000001059340510_p1416912102303"></a><a name="en-us_topic_0000001059340510_p1416912102303"></a>Type of the bounding box generated by the divider. The value can be <strong id="en-us_topic_0000001059340510_b54008818310"><a name="en-us_topic_0000001059340510_b54008818310"></a><a name="en-us_topic_0000001059340510_b54008818310"></a>flex</strong> or <strong id="en-us_topic_0000001059340510_b12400188103111"><a name="en-us_topic_0000001059340510_b12400188103111"></a><a name="en-us_topic_0000001059340510_b12400188103111"></a>none</strong>. The default value is <strong id="en-us_topic_0000001059340510_b134003817319"><a name="en-us_topic_0000001059340510_b134003817319"></a><a name="en-us_topic_0000001059340510_b134003817319"></a>flex</strong>.</p> 176</td> 177</tr> 178<tr id="en-us_topic_0000001059340510_row1836619303"><td class="cellrowborder" valign="top" width="19.038096190380962%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_p81691410143017"><a name="en-us_topic_0000001059340510_p81691410143017"></a><a name="en-us_topic_0000001059340510_p81691410143017"></a>visibility</p> 179</td> 180<td class="cellrowborder" valign="top" width="23.847615238476152%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_p51691710173018"><a name="en-us_topic_0000001059340510_p51691710173018"></a><a name="en-us_topic_0000001059340510_p51691710173018"></a>string</p> 181</td> 182<td class="cellrowborder" valign="top" width="12.118788121187881%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_p14169101053017"><a name="en-us_topic_0000001059340510_p14169101053017"></a><a name="en-us_topic_0000001059340510_p14169101053017"></a>visible</p> 183</td> 184<td class="cellrowborder" valign="top" width="8.269173082691731%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p1016919104306"><a name="en-us_topic_0000001059340510_p1016919104306"></a><a name="en-us_topic_0000001059340510_p1016919104306"></a>No</p> 185</td> 186<td class="cellrowborder" valign="top" width="36.72632736726327%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p13169101011309"><a name="en-us_topic_0000001059340510_p13169101011309"></a><a name="en-us_topic_0000001059340510_p13169101011309"></a>Whether to display the divider. Invisible dividers also occupy space. <strong id="en-us_topic_0000001059340510_b9290124115011"><a name="en-us_topic_0000001059340510_b9290124115011"></a><a name="en-us_topic_0000001059340510_b9290124115011"></a>visible</strong> indicates that the divider is displayed, and <strong id="en-us_topic_0000001059340510_b571315351925"><a name="en-us_topic_0000001059340510_b571315351925"></a><a name="en-us_topic_0000001059340510_b571315351925"></a>hidden</strong> indicates that the divider is not displayed.</p> 187</td> 188</tr> 189<tr id="en-us_topic_0000001059340510_row19262114111135"><td class="cellrowborder" valign="top" width="19.038096190380962%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_p1126317411138"><a name="en-us_topic_0000001059340510_p1126317411138"></a><a name="en-us_topic_0000001059340510_p1126317411138"></a>line-cap</p> 190</td> 191<td class="cellrowborder" valign="top" width="23.847615238476152%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_p13140171172312"><a name="en-us_topic_0000001059340510_p13140171172312"></a><a name="en-us_topic_0000001059340510_p13140171172312"></a>string</p> 192</td> 193<td class="cellrowborder" valign="top" width="12.118788121187881%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_p926310414130"><a name="en-us_topic_0000001059340510_p926310414130"></a><a name="en-us_topic_0000001059340510_p926310414130"></a>butt</p> 194</td> 195<td class="cellrowborder" valign="top" width="8.269173082691731%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p172631041181314"><a name="en-us_topic_0000001059340510_p172631041181314"></a><a name="en-us_topic_0000001059340510_p172631041181314"></a>No</p> 196</td> 197<td class="cellrowborder" valign="top" width="36.72632736726327%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p1826374117137"><a name="en-us_topic_0000001059340510_p1826374117137"></a><a name="en-us_topic_0000001059340510_p1826374117137"></a>Cap style of the divider. The default value is <strong id="en-us_topic_0000001059340510_b11938171773415"><a name="en-us_topic_0000001059340510_b11938171773415"></a><a name="en-us_topic_0000001059340510_b11938171773415"></a>butt</strong>. Available values are as follows:</p> 198<a name="en-us_topic_0000001059340510_ul169886211615"></a><a name="en-us_topic_0000001059340510_ul169886211615"></a><ul id="en-us_topic_0000001059340510_ul169886211615"><li><strong id="en-us_topic_0000001059340510_b097794943310"><a name="en-us_topic_0000001059340510_b097794943310"></a><a name="en-us_topic_0000001059340510_b097794943310"></a>butt</strong>: The ends of the divider are squared off.</li><li><strong id="en-us_topic_0000001059340510_b579115410335"><a name="en-us_topic_0000001059340510_b579115410335"></a><a name="en-us_topic_0000001059340510_b579115410335"></a>round</strong>: A rounded cap is added to each end of the divider.</li><li><strong id="en-us_topic_0000001059340510_b196977590336"><a name="en-us_topic_0000001059340510_b196977590336"></a><a name="en-us_topic_0000001059340510_b196977590336"></a>square</strong>: A square cap is added to each end of the divider.</li></ul> 199<div class="note" id="en-us_topic_0000001059340510_note46927357715"><a name="en-us_topic_0000001059340510_note46927357715"></a><a name="en-us_topic_0000001059340510_note46927357715"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001059340510_p126922351571"><a name="en-us_topic_0000001059340510_p126922351571"></a><a name="en-us_topic_0000001059340510_p126922351571"></a>If the value is <strong id="en-us_topic_0000001059340510_b11815103163413"><a name="en-us_topic_0000001059340510_b11815103163413"></a><a name="en-us_topic_0000001059340510_b11815103163413"></a>round</strong> or <strong id="en-us_topic_0000001059340510_b31272793415"><a name="en-us_topic_0000001059340510_b31272793415"></a><a name="en-us_topic_0000001059340510_b31272793415"></a>square</strong>, the line length increases by the line width.</p> 200</div></div> 201</td> 202</tr> 203<tr id="en-us_topic_0000001059340510_row3222184412411"><td class="cellrowborder" valign="top" width="19.038096190380962%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_ad74a6a48aca7439e9344c18c26b4177e"><a name="en-us_topic_0000001059340510_ad74a6a48aca7439e9344c18c26b4177e"></a><a name="en-us_topic_0000001059340510_ad74a6a48aca7439e9344c18c26b4177e"></a>flex</p> 204</td> 205<td class="cellrowborder" valign="top" width="23.847615238476152%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_a2e6e5192a1534872be5fcfd9f83e3fdc"><a name="en-us_topic_0000001059340510_a2e6e5192a1534872be5fcfd9f83e3fdc"></a><a name="en-us_topic_0000001059340510_a2e6e5192a1534872be5fcfd9f83e3fdc"></a>number</p> 206</td> 207<td class="cellrowborder" valign="top" width="12.118788121187881%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_a8512eda38e25410685be8a8992890257"><a name="en-us_topic_0000001059340510_a8512eda38e25410685be8a8992890257"></a><a name="en-us_topic_0000001059340510_a8512eda38e25410685be8a8992890257"></a>-</p> 208</td> 209<td class="cellrowborder" valign="top" width="8.269173082691731%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p14201322964"><a name="en-us_topic_0000001059340510_p14201322964"></a><a name="en-us_topic_0000001059340510_p14201322964"></a>No</p> 210</td> 211<td class="cellrowborder" valign="top" width="36.72632736726327%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p368291715615"><a name="en-us_topic_0000001059340510_p368291715615"></a><a name="en-us_topic_0000001059340510_p368291715615"></a>How to divide available space of the parent component for each child component. This is a shorthand attribute to set the <strong id="en-us_topic_0000001059340510_b065931874612"><a name="en-us_topic_0000001059340510_b065931874612"></a><a name="en-us_topic_0000001059340510_b065931874612"></a>flex-grow</strong> attribute.</p> 212<div class="note" id="en-us_topic_0000001059340510_note1368217171461"><a name="en-us_topic_0000001059340510_note1368217171461"></a><a name="en-us_topic_0000001059340510_note1368217171461"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001059340510_p76821817460"><a name="en-us_topic_0000001059340510_p76821817460"></a><a name="en-us_topic_0000001059340510_p76821817460"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001059340510_b11480192416462"><a name="en-us_topic_0000001059340510_b11480192416462"></a><a name="en-us_topic_0000001059340510_b11480192416462"></a><div></strong>, <strong id="en-us_topic_0000001059340510_b4481624124614"><a name="en-us_topic_0000001059340510_b4481624124614"></a><a name="en-us_topic_0000001059340510_b4481624124614"></a><list-item></strong>, or <strong id="en-us_topic_0000001059340510_b448116241468"><a name="en-us_topic_0000001059340510_b448116241468"></a><a name="en-us_topic_0000001059340510_b448116241468"></a><tabs></strong>.</p> 213</div></div> 214</td> 215</tr> 216<tr id="en-us_topic_0000001059340510_row879744718418"><td class="cellrowborder" valign="top" width="19.038096190380962%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_a5d88cacaaf5c4f6a87390ab916b695c6"><a name="en-us_topic_0000001059340510_a5d88cacaaf5c4f6a87390ab916b695c6"></a><a name="en-us_topic_0000001059340510_a5d88cacaaf5c4f6a87390ab916b695c6"></a>flex-grow</p> 217</td> 218<td class="cellrowborder" valign="top" width="23.847615238476152%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_a2c379e3af283446da446f1631e572efd"><a name="en-us_topic_0000001059340510_a2c379e3af283446da446f1631e572efd"></a><a name="en-us_topic_0000001059340510_a2c379e3af283446da446f1631e572efd"></a>number</p> 219</td> 220<td class="cellrowborder" valign="top" width="12.118788121187881%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_aa374f6c7415a4ee48a06930d76c55be7"><a name="en-us_topic_0000001059340510_aa374f6c7415a4ee48a06930d76c55be7"></a><a name="en-us_topic_0000001059340510_aa374f6c7415a4ee48a06930d76c55be7"></a>0</p> 221</td> 222<td class="cellrowborder" valign="top" width="8.269173082691731%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p1335271877"><a name="en-us_topic_0000001059340510_p1335271877"></a><a name="en-us_topic_0000001059340510_p1335271877"></a>No</p> 223</td> 224<td class="cellrowborder" valign="top" width="36.72632736726327%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p13246193876"><a name="en-us_topic_0000001059340510_p13246193876"></a><a name="en-us_topic_0000001059340510_p13246193876"></a>How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value <strong id="en-us_topic_0000001059340510_b13294279468"><a name="en-us_topic_0000001059340510_b13294279468"></a><a name="en-us_topic_0000001059340510_b13294279468"></a>0</strong> indicates that the child component does not grow.</p> 225<div class="note" id="en-us_topic_0000001059340510_note62462313719"><a name="en-us_topic_0000001059340510_note62462313719"></a><a name="en-us_topic_0000001059340510_note62462313719"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001059340510_p1324610312715"><a name="en-us_topic_0000001059340510_p1324610312715"></a><a name="en-us_topic_0000001059340510_p1324610312715"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001059340510_b1073603631"><a name="en-us_topic_0000001059340510_b1073603631"></a><a name="en-us_topic_0000001059340510_b1073603631"></a><div></strong>, <strong id="en-us_topic_0000001059340510_b1817581462"><a name="en-us_topic_0000001059340510_b1817581462"></a><a name="en-us_topic_0000001059340510_b1817581462"></a><list-item></strong>, or <strong id="en-us_topic_0000001059340510_b887202914"><a name="en-us_topic_0000001059340510_b887202914"></a><a name="en-us_topic_0000001059340510_b887202914"></a><tabs></strong>.</p> 226</div></div> 227<p id="en-us_topic_0000001059340510_p14246435713"><a name="en-us_topic_0000001059340510_p14246435713"></a><a name="en-us_topic_0000001059340510_p14246435713"></a></p> 228</td> 229</tr> 230<tr id="en-us_topic_0000001059340510_row187966501419"><td class="cellrowborder" valign="top" width="19.038096190380962%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_ac65ef7e2b1f24a13b09c495f643168c9"><a name="en-us_topic_0000001059340510_ac65ef7e2b1f24a13b09c495f643168c9"></a><a name="en-us_topic_0000001059340510_ac65ef7e2b1f24a13b09c495f643168c9"></a>flex-shrink</p> 231</td> 232<td class="cellrowborder" valign="top" width="23.847615238476152%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_a98e7d367f0e649699892ae5bad6ade37"><a name="en-us_topic_0000001059340510_a98e7d367f0e649699892ae5bad6ade37"></a><a name="en-us_topic_0000001059340510_a98e7d367f0e649699892ae5bad6ade37"></a>number</p> 233</td> 234<td class="cellrowborder" valign="top" width="12.118788121187881%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_a422d978368814d12a33201cb839060ee"><a name="en-us_topic_0000001059340510_a422d978368814d12a33201cb839060ee"></a><a name="en-us_topic_0000001059340510_a422d978368814d12a33201cb839060ee"></a>1</p> 235</td> 236<td class="cellrowborder" valign="top" width="8.269173082691731%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p164884516713"><a name="en-us_topic_0000001059340510_p164884516713"></a><a name="en-us_topic_0000001059340510_p164884516713"></a>No</p> 237</td> 238<td class="cellrowborder" valign="top" width="36.72632736726327%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p13640114214710"><a name="en-us_topic_0000001059340510_p13640114214710"></a><a name="en-us_topic_0000001059340510_p13640114214710"></a>How much a child component will shrink. The shrink occurs only when the sum of default element widths is greater than that of the parent component. Value <strong id="en-us_topic_0000001059340510_b618802815466"><a name="en-us_topic_0000001059340510_b618802815466"></a><a name="en-us_topic_0000001059340510_b618802815466"></a>0</strong> indicates that the child component does not shrink.</p> 239<div class="note" id="en-us_topic_0000001059340510_note364074212713"><a name="en-us_topic_0000001059340510_note364074212713"></a><a name="en-us_topic_0000001059340510_note364074212713"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001059340510_p186406427711"><a name="en-us_topic_0000001059340510_p186406427711"></a><a name="en-us_topic_0000001059340510_p186406427711"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001059340510_b779461144"><a name="en-us_topic_0000001059340510_b779461144"></a><a name="en-us_topic_0000001059340510_b779461144"></a><div></strong>, <strong id="en-us_topic_0000001059340510_b626775195"><a name="en-us_topic_0000001059340510_b626775195"></a><a name="en-us_topic_0000001059340510_b626775195"></a><list-item></strong>, or <strong id="en-us_topic_0000001059340510_b868607121"><a name="en-us_topic_0000001059340510_b868607121"></a><a name="en-us_topic_0000001059340510_b868607121"></a><tabs></strong>.</p> 240</div></div> 241</td> 242</tr> 243<tr id="en-us_topic_0000001059340510_row438316531843"><td class="cellrowborder" valign="top" width="19.038096190380962%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059340510_a82c323a994634032963169eeee1a55e4"><a name="en-us_topic_0000001059340510_a82c323a994634032963169eeee1a55e4"></a><a name="en-us_topic_0000001059340510_a82c323a994634032963169eeee1a55e4"></a>flex-basis</p> 244</td> 245<td class="cellrowborder" valign="top" width="23.847615238476152%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059340510_p1148910787"><a name="en-us_topic_0000001059340510_p1148910787"></a><a name="en-us_topic_0000001059340510_p1148910787"></a><length></p> 246<p id="en-us_topic_0000001059340510_a43613cf0c2184c0d8b44e8d292f6edb7"><a name="en-us_topic_0000001059340510_a43613cf0c2184c0d8b44e8d292f6edb7"></a><a name="en-us_topic_0000001059340510_a43613cf0c2184c0d8b44e8d292f6edb7"></a></p> 247</td> 248<td class="cellrowborder" valign="top" width="12.118788121187881%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059340510_ab9e1c7dc25f840e58993af05c1d32109"><a name="en-us_topic_0000001059340510_ab9e1c7dc25f840e58993af05c1d32109"></a><a name="en-us_topic_0000001059340510_ab9e1c7dc25f840e58993af05c1d32109"></a>-</p> 249</td> 250<td class="cellrowborder" valign="top" width="8.269173082691731%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059340510_p124162561774"><a name="en-us_topic_0000001059340510_p124162561774"></a><a name="en-us_topic_0000001059340510_p124162561774"></a>No</p> 251</td> 252<td class="cellrowborder" valign="top" width="36.72632736726327%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059340510_p192811541574"><a name="en-us_topic_0000001059340510_p192811541574"></a><a name="en-us_topic_0000001059340510_p192811541574"></a>Initial length of a child component on the main axis</p> 253<div class="note" id="en-us_topic_0000001059340510_note162817541279"><a name="en-us_topic_0000001059340510_note162817541279"></a><a name="en-us_topic_0000001059340510_note162817541279"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="en-us_topic_0000001059340510_p1928115418713"><a name="en-us_topic_0000001059340510_p1928115418713"></a><a name="en-us_topic_0000001059340510_p1928115418713"></a>This attribute takes effect only when the parent component is <strong id="en-us_topic_0000001059340510_b103138373466"><a name="en-us_topic_0000001059340510_b103138373466"></a><a name="en-us_topic_0000001059340510_b103138373466"></a><div></strong>, <strong id="en-us_topic_0000001059340510_b831417371468"><a name="en-us_topic_0000001059340510_b831417371468"></a><a name="en-us_topic_0000001059340510_b831417371468"></a><list-item></strong>, or <strong id="en-us_topic_0000001059340510_b13314153715462"><a name="en-us_topic_0000001059340510_b13314153715462"></a><a name="en-us_topic_0000001059340510_b13314153715462"></a><tabs></strong>.</p> 254</div></div> 255</td> 256</tr> 257</tbody> 258</table> 259 260## Example<a name="en-us_topic_0000001059340510_section230641814493"></a> 261 262``` 263<!-- xxx.hml --> 264<div class="container"> 265 <div class="content"> 266 <divider class="divider" vertical="false"></divider> 267 </div> 268</div> 269``` 270 271``` 272/* xxx.css */ 273.container { 274 margin: 20px; 275 flex-direction:column; 276 width:100%; 277 height:100%; 278 align-items:center; 279} 280.content{ 281 width:80%; 282 height:40%; 283 border:1px solid #000000; 284 align-items: center; 285 justify-content: center; 286 flex-direction:column; 287} 288.divider { 289 margin: 10px; 290 color: #ff0000ff; 291 stroke-width: 3px; 292 line-cap: round; 293} 294``` 295 296 297 298
