1# divider<a name="ZH-CN_TOPIC_0000001209412129"></a> 2 3提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。 4 5## 权限列表<a name="zh-cn_topic_0000001127125060_section11257113618419"></a> 6 7无 8 9## 子组件<a name="zh-cn_topic_0000001127125060_section9288143101012"></a> 10 11不支持。 12 13## 属性<a name="zh-cn_topic_0000001127125060_section2907183951110"></a> 14 15除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 16 17<a name="zh-cn_topic_0000001127125060_table20633101642315"></a> 18<table><thead align="left"><tr id="zh-cn_topic_0000001127125060_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127125060_aa872998ac2d84843a3c5161889afffef"><a name="zh-cn_topic_0000001127125060_aa872998ac2d84843a3c5161889afffef"></a><a name="zh-cn_topic_0000001127125060_aa872998ac2d84843a3c5161889afffef"></a>名称</p> 19</th> 20<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127125060_ab2111648ee0e4f6d881be8954e7acaab"><a name="zh-cn_topic_0000001127125060_ab2111648ee0e4f6d881be8954e7acaab"></a><a name="zh-cn_topic_0000001127125060_ab2111648ee0e4f6d881be8954e7acaab"></a>类型</p> 21</th> 22<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127125060_ab377d1c90900478ea4ecab51e9a058af"><a name="zh-cn_topic_0000001127125060_ab377d1c90900478ea4ecab51e9a058af"></a><a name="zh-cn_topic_0000001127125060_ab377d1c90900478ea4ecab51e9a058af"></a>默认值</p> 23</th> 24<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127125060_p824610360217"><a name="zh-cn_topic_0000001127125060_p824610360217"></a><a name="zh-cn_topic_0000001127125060_p824610360217"></a>必填</p> 25</th> 26<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127125060_a1d574a0044ed42ec8a2603bc82734232"><a name="zh-cn_topic_0000001127125060_a1d574a0044ed42ec8a2603bc82734232"></a><a name="zh-cn_topic_0000001127125060_a1d574a0044ed42ec8a2603bc82734232"></a>描述</p> 27</th> 28</tr> 29</thead> 30<tbody><tr id="zh-cn_topic_0000001127125060_row14446349178"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_p15694934121713"><a name="zh-cn_topic_0000001127125060_p15694934121713"></a><a name="zh-cn_topic_0000001127125060_p15694934121713"></a>vertical</p> 31</td> 32<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_p0694434171720"><a name="zh-cn_topic_0000001127125060_p0694434171720"></a><a name="zh-cn_topic_0000001127125060_p0694434171720"></a>boolean</p> 33</td> 34<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_p2694103415179"><a name="zh-cn_topic_0000001127125060_p2694103415179"></a><a name="zh-cn_topic_0000001127125060_p2694103415179"></a>false</p> 35</td> 36<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_p13694103471711"><a name="zh-cn_topic_0000001127125060_p13694103471711"></a><a name="zh-cn_topic_0000001127125060_p13694103471711"></a>否</p> 37</td> 38<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p1769433401719"><a name="zh-cn_topic_0000001127125060_p1769433401719"></a><a name="zh-cn_topic_0000001127125060_p1769433401719"></a>使用水平分割线还是垂直分割线，默认水平。</p> 39</td> 40</tr> 41</tbody> 42</table> 43 44> **说明：** 45>- 不支持focusable、disabled属性。 46 47## 样式<a name="zh-cn_topic_0000001127125060_section5775351116"></a> 48 49仅支持如下样式： 50 51<a name="zh-cn_topic_0000001127125060_table156669187471"></a> 52<table><thead align="left"><tr id="zh-cn_topic_0000001127125060_row966601820476"><th class="cellrowborder" valign="top" width="18.209640397857694%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127125060_p1366616188472"><a name="zh-cn_topic_0000001127125060_p1366616188472"></a><a name="zh-cn_topic_0000001127125060_p1366616188472"></a>名称</p> 53</th> 54<th class="cellrowborder" valign="top" width="14.135424636572303%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127125060_p26661418194711"><a name="zh-cn_topic_0000001127125060_p26661418194711"></a><a name="zh-cn_topic_0000001127125060_p26661418194711"></a>类型</p> 55</th> 56<th class="cellrowborder" valign="top" width="22.083014537107886%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127125060_p36661718194710"><a name="zh-cn_topic_0000001127125060_p36661718194710"></a><a name="zh-cn_topic_0000001127125060_p36661718194710"></a>默认值</p> 57</th> 58<th class="cellrowborder" valign="top" width="6.7999234889058915%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127125060_p16666141812475"><a name="zh-cn_topic_0000001127125060_p16666141812475"></a><a name="zh-cn_topic_0000001127125060_p16666141812475"></a>必填</p> 59</th> 60<th class="cellrowborder" valign="top" width="38.77199693955624%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127125060_p16667718174712"><a name="zh-cn_topic_0000001127125060_p16667718174712"></a><a name="zh-cn_topic_0000001127125060_p16667718174712"></a>描述</p> 61</th> 62</tr> 63</thead> 64<tbody><tr id="zh-cn_topic_0000001127125060_row186671218144718"><td class="cellrowborder" valign="top" width="18.209640397857694%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_p666720180479"><a name="zh-cn_topic_0000001127125060_p666720180479"></a><a name="zh-cn_topic_0000001127125060_p666720180479"></a>margin</p> 65</td> 66<td class="cellrowborder" valign="top" width="14.135424636572303%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_p666714189478"><a name="zh-cn_topic_0000001127125060_p666714189478"></a><a name="zh-cn_topic_0000001127125060_p666714189478"></a><length></p> 67</td> 68<td class="cellrowborder" valign="top" width="22.083014537107886%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_p18667181834719"><a name="zh-cn_topic_0000001127125060_p18667181834719"></a><a name="zh-cn_topic_0000001127125060_p18667181834719"></a>0</p> 69</td> 70<td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_p9667171834720"><a name="zh-cn_topic_0000001127125060_p9667171834720"></a><a name="zh-cn_topic_0000001127125060_p9667171834720"></a>否</p> 71</td> 72<td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p8667191824717"><a name="zh-cn_topic_0000001127125060_p8667191824717"></a><a name="zh-cn_topic_0000001127125060_p8667191824717"></a>使用简写属性设置所有的外边距属性，该属性可以有1到4个值。</p> 73</td> 74</tr> 75<tr id="zh-cn_topic_0000001127125060_row1758549135917"><td class="cellrowborder" valign="top" width="18.209640397857694%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_a70939a36b2b04dd8bec21f5bddc8637e"><a name="zh-cn_topic_0000001127125060_a70939a36b2b04dd8bec21f5bddc8637e"></a><a name="zh-cn_topic_0000001127125060_a70939a36b2b04dd8bec21f5bddc8637e"></a>margin-[left|top|right|bottom]</p> 76</td> 77<td class="cellrowborder" valign="top" width="14.135424636572303%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_ae53ac9ac370d483990e04ea9789c1e49"><a name="zh-cn_topic_0000001127125060_ae53ac9ac370d483990e04ea9789c1e49"></a><a name="zh-cn_topic_0000001127125060_ae53ac9ac370d483990e04ea9789c1e49"></a><length></p> 78</td> 79<td class="cellrowborder" valign="top" width="22.083014537107886%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_a180cd037e6174e5c82f35a3a66b6f2ec"><a name="zh-cn_topic_0000001127125060_a180cd037e6174e5c82f35a3a66b6f2ec"></a><a name="zh-cn_topic_0000001127125060_a180cd037e6174e5c82f35a3a66b6f2ec"></a>0</p> 80</td> 81<td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_a487d09add6e54c5c89fa4f22e9318271"><a name="zh-cn_topic_0000001127125060_a487d09add6e54c5c89fa4f22e9318271"></a><a name="zh-cn_topic_0000001127125060_a487d09add6e54c5c89fa4f22e9318271"></a>否</p> 82</td> 83<td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p696123114464"><a name="zh-cn_topic_0000001127125060_p696123114464"></a><a name="zh-cn_topic_0000001127125060_p696123114464"></a>使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。</p> 84</td> 85</tr> 86<tr id="zh-cn_topic_0000001127125060_row1487514596294"><td class="cellrowborder" valign="top" width="18.209640397857694%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_p71673109308"><a name="zh-cn_topic_0000001127125060_p71673109308"></a><a name="zh-cn_topic_0000001127125060_p71673109308"></a>color</p> 87</td> 88<td class="cellrowborder" valign="top" width="14.135424636572303%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_p516781011309"><a name="zh-cn_topic_0000001127125060_p516781011309"></a><a name="zh-cn_topic_0000001127125060_p516781011309"></a><color></p> 89</td> 90<td class="cellrowborder" valign="top" width="22.083014537107886%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_p416718104300"><a name="zh-cn_topic_0000001127125060_p416718104300"></a><a name="zh-cn_topic_0000001127125060_p416718104300"></a>#08000000</p> 91</td> 92<td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_p1016741053017"><a name="zh-cn_topic_0000001127125060_p1016741053017"></a><a name="zh-cn_topic_0000001127125060_p1016741053017"></a>否</p> 93</td> 94<td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p116711013301"><a name="zh-cn_topic_0000001127125060_p116711013301"></a><a name="zh-cn_topic_0000001127125060_p116711013301"></a>设置分割线颜色。</p> 95</td> 96</tr> 97<tr id="zh-cn_topic_0000001127125060_row1055218083014"><td class="cellrowborder" valign="top" width="18.209640397857694%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_p10167710193019"><a name="zh-cn_topic_0000001127125060_p10167710193019"></a><a name="zh-cn_topic_0000001127125060_p10167710193019"></a>stroke-width</p> 98</td> 99<td class="cellrowborder" valign="top" width="14.135424636572303%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_p6167121093018"><a name="zh-cn_topic_0000001127125060_p6167121093018"></a><a name="zh-cn_topic_0000001127125060_p6167121093018"></a><length></p> 100</td> 101<td class="cellrowborder" valign="top" width="22.083014537107886%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_p31671010113017"><a name="zh-cn_topic_0000001127125060_p31671010113017"></a><a name="zh-cn_topic_0000001127125060_p31671010113017"></a>1</p> 102</td> 103<td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_p3167181019303"><a name="zh-cn_topic_0000001127125060_p3167181019303"></a><a name="zh-cn_topic_0000001127125060_p3167181019303"></a>否</p> 104</td> 105<td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p13167101016307"><a name="zh-cn_topic_0000001127125060_p13167101016307"></a><a name="zh-cn_topic_0000001127125060_p13167101016307"></a>设置分割线宽度。</p> 106</td> 107</tr> 108<tr id="zh-cn_topic_0000001127125060_row56167193020"><td class="cellrowborder" valign="top" width="18.209640397857694%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_p161695103305"><a name="zh-cn_topic_0000001127125060_p161695103305"></a><a name="zh-cn_topic_0000001127125060_p161695103305"></a>display</p> 109</td> 110<td class="cellrowborder" valign="top" width="14.135424636572303%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_p34141720115716"><a name="zh-cn_topic_0000001127125060_p34141720115716"></a><a name="zh-cn_topic_0000001127125060_p34141720115716"></a>string</p> 111</td> 112<td class="cellrowborder" valign="top" width="22.083014537107886%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_p17169310133020"><a name="zh-cn_topic_0000001127125060_p17169310133020"></a><a name="zh-cn_topic_0000001127125060_p17169310133020"></a>flex</p> 113</td> 114<td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_p3169101019308"><a name="zh-cn_topic_0000001127125060_p3169101019308"></a><a name="zh-cn_topic_0000001127125060_p3169101019308"></a>否</p> 115</td> 116<td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p1416912102303"><a name="zh-cn_topic_0000001127125060_p1416912102303"></a><a name="zh-cn_topic_0000001127125060_p1416912102303"></a>确定分割线所产生的框的类型。值flex/none，默认值flex。</p> 117</td> 118</tr> 119<tr id="zh-cn_topic_0000001127125060_row1836619303"><td class="cellrowborder" valign="top" width="18.209640397857694%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_p81691410143017"><a name="zh-cn_topic_0000001127125060_p81691410143017"></a><a name="zh-cn_topic_0000001127125060_p81691410143017"></a>visibility</p> 120</td> 121<td class="cellrowborder" valign="top" width="14.135424636572303%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_p51691710173018"><a name="zh-cn_topic_0000001127125060_p51691710173018"></a><a name="zh-cn_topic_0000001127125060_p51691710173018"></a>string</p> 122</td> 123<td class="cellrowborder" valign="top" width="22.083014537107886%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_p14169101053017"><a name="zh-cn_topic_0000001127125060_p14169101053017"></a><a name="zh-cn_topic_0000001127125060_p14169101053017"></a>visible</p> 124</td> 125<td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_p1016919104306"><a name="zh-cn_topic_0000001127125060_p1016919104306"></a><a name="zh-cn_topic_0000001127125060_p1016919104306"></a>否</p> 126</td> 127<td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p13169101011309"><a name="zh-cn_topic_0000001127125060_p13169101011309"></a><a name="zh-cn_topic_0000001127125060_p13169101011309"></a>是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。</p> 128</td> 129</tr> 130<tr id="zh-cn_topic_0000001127125060_row19262114111135"><td class="cellrowborder" valign="top" width="18.209640397857694%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_p1126317411138"><a name="zh-cn_topic_0000001127125060_p1126317411138"></a><a name="zh-cn_topic_0000001127125060_p1126317411138"></a>line-cap</p> 131</td> 132<td class="cellrowborder" valign="top" width="14.135424636572303%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_p13140171172312"><a name="zh-cn_topic_0000001127125060_p13140171172312"></a><a name="zh-cn_topic_0000001127125060_p13140171172312"></a>string</p> 133</td> 134<td class="cellrowborder" valign="top" width="22.083014537107886%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_p926310414130"><a name="zh-cn_topic_0000001127125060_p926310414130"></a><a name="zh-cn_topic_0000001127125060_p926310414130"></a>butt</p> 135</td> 136<td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_p172631041181314"><a name="zh-cn_topic_0000001127125060_p172631041181314"></a><a name="zh-cn_topic_0000001127125060_p172631041181314"></a>否</p> 137</td> 138<td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p1826374117137"><a name="zh-cn_topic_0000001127125060_p1826374117137"></a><a name="zh-cn_topic_0000001127125060_p1826374117137"></a>设置分割线条的端点样式，默认为butt，可选值为：</p> 139<a name="zh-cn_topic_0000001127125060_ul169886211615"></a><a name="zh-cn_topic_0000001127125060_ul169886211615"></a><ul id="zh-cn_topic_0000001127125060_ul169886211615"><li>butt：分割线两端为平行线；</li><li>round：分割线两端额外添加半圆；</li><li>square：分割线两端额外添加半方形；</li></ul> 140<div class="note" id="zh-cn_topic_0000001127125060_note46927357715"><a name="zh-cn_topic_0000001127125060_note46927357715"></a><a name="zh-cn_topic_0000001127125060_note46927357715"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001127125060_p126922351571"><a name="zh-cn_topic_0000001127125060_p126922351571"></a><a name="zh-cn_topic_0000001127125060_p126922351571"></a>round和square会额外增加一个线宽的分割线长度。</p> 141</div></div> 142</td> 143</tr> 144<tr id="zh-cn_topic_0000001127125060_row3222184412411"><td class="cellrowborder" valign="top" width="18.209640397857694%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_ad74a6a48aca7439e9344c18c26b4177e"><a name="zh-cn_topic_0000001127125060_ad74a6a48aca7439e9344c18c26b4177e"></a><a name="zh-cn_topic_0000001127125060_ad74a6a48aca7439e9344c18c26b4177e"></a>flex</p> 145</td> 146<td class="cellrowborder" valign="top" width="14.135424636572303%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_a2e6e5192a1534872be5fcfd9f83e3fdc"><a name="zh-cn_topic_0000001127125060_a2e6e5192a1534872be5fcfd9f83e3fdc"></a><a name="zh-cn_topic_0000001127125060_a2e6e5192a1534872be5fcfd9f83e3fdc"></a>number</p> 147</td> 148<td class="cellrowborder" valign="top" width="22.083014537107886%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_a8512eda38e25410685be8a8992890257"><a name="zh-cn_topic_0000001127125060_a8512eda38e25410685be8a8992890257"></a><a name="zh-cn_topic_0000001127125060_a8512eda38e25410685be8a8992890257"></a>-</p> 149</td> 150<td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_p14201322964"><a name="zh-cn_topic_0000001127125060_p14201322964"></a><a name="zh-cn_topic_0000001127125060_p14201322964"></a>否</p> 151</td> 152<td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p368291715615"><a name="zh-cn_topic_0000001127125060_p368291715615"></a><a name="zh-cn_topic_0000001127125060_p368291715615"></a>规定了分割线如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。</p> 153<div class="note" id="zh-cn_topic_0000001127125060_note1368217171461"><a name="zh-cn_topic_0000001127125060_note1368217171461"></a><a name="zh-cn_topic_0000001127125060_note1368217171461"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001127125060_p76821817460"><a name="zh-cn_topic_0000001127125060_p76821817460"></a><a name="zh-cn_topic_0000001127125060_p76821817460"></a>仅父容器为<div>、<list-item>、<tabs>时生效。</p> 154</div></div> 155</td> 156</tr> 157<tr id="zh-cn_topic_0000001127125060_row879744718418"><td class="cellrowborder" valign="top" width="18.209640397857694%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_a5d88cacaaf5c4f6a87390ab916b695c6"><a name="zh-cn_topic_0000001127125060_a5d88cacaaf5c4f6a87390ab916b695c6"></a><a name="zh-cn_topic_0000001127125060_a5d88cacaaf5c4f6a87390ab916b695c6"></a>flex-grow</p> 158</td> 159<td class="cellrowborder" valign="top" width="14.135424636572303%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_a2c379e3af283446da446f1631e572efd"><a name="zh-cn_topic_0000001127125060_a2c379e3af283446da446f1631e572efd"></a><a name="zh-cn_topic_0000001127125060_a2c379e3af283446da446f1631e572efd"></a>number</p> 160</td> 161<td class="cellrowborder" valign="top" width="22.083014537107886%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_aa374f6c7415a4ee48a06930d76c55be7"><a name="zh-cn_topic_0000001127125060_aa374f6c7415a4ee48a06930d76c55be7"></a><a name="zh-cn_topic_0000001127125060_aa374f6c7415a4ee48a06930d76c55be7"></a>0</p> 162</td> 163<td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_p1335271877"><a name="zh-cn_topic_0000001127125060_p1335271877"></a><a name="zh-cn_topic_0000001127125060_p1335271877"></a>否</p> 164</td> 165<td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p13246193876"><a name="zh-cn_topic_0000001127125060_p13246193876"></a><a name="zh-cn_topic_0000001127125060_p13246193876"></a>设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数。0为不伸展。</p> 166<div class="note" id="zh-cn_topic_0000001127125060_note62462313719"><a name="zh-cn_topic_0000001127125060_note62462313719"></a><a name="zh-cn_topic_0000001127125060_note62462313719"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001127125060_p1324610312715"><a name="zh-cn_topic_0000001127125060_p1324610312715"></a><a name="zh-cn_topic_0000001127125060_p1324610312715"></a>仅父容器为<div>、<list-item>、<tabs>时生效。</p> 167</div></div> 168<p id="zh-cn_topic_0000001127125060_p14246435713"><a name="zh-cn_topic_0000001127125060_p14246435713"></a><a name="zh-cn_topic_0000001127125060_p14246435713"></a></p> 169</td> 170</tr> 171<tr id="zh-cn_topic_0000001127125060_row187966501419"><td class="cellrowborder" valign="top" width="18.209640397857694%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_ac65ef7e2b1f24a13b09c495f643168c9"><a name="zh-cn_topic_0000001127125060_ac65ef7e2b1f24a13b09c495f643168c9"></a><a name="zh-cn_topic_0000001127125060_ac65ef7e2b1f24a13b09c495f643168c9"></a>flex-shrink</p> 172</td> 173<td class="cellrowborder" valign="top" width="14.135424636572303%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_a98e7d367f0e649699892ae5bad6ade37"><a name="zh-cn_topic_0000001127125060_a98e7d367f0e649699892ae5bad6ade37"></a><a name="zh-cn_topic_0000001127125060_a98e7d367f0e649699892ae5bad6ade37"></a>number</p> 174</td> 175<td class="cellrowborder" valign="top" width="22.083014537107886%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_a422d978368814d12a33201cb839060ee"><a name="zh-cn_topic_0000001127125060_a422d978368814d12a33201cb839060ee"></a><a name="zh-cn_topic_0000001127125060_a422d978368814d12a33201cb839060ee"></a>1</p> 176</td> 177<td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_p164884516713"><a name="zh-cn_topic_0000001127125060_p164884516713"></a><a name="zh-cn_topic_0000001127125060_p164884516713"></a>否</p> 178</td> 179<td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p13640114214710"><a name="zh-cn_topic_0000001127125060_p13640114214710"></a><a name="zh-cn_topic_0000001127125060_p13640114214710"></a>设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。</p> 180<div class="note" id="zh-cn_topic_0000001127125060_note364074212713"><a name="zh-cn_topic_0000001127125060_note364074212713"></a><a name="zh-cn_topic_0000001127125060_note364074212713"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001127125060_p186406427711"><a name="zh-cn_topic_0000001127125060_p186406427711"></a><a name="zh-cn_topic_0000001127125060_p186406427711"></a>仅父容器为<div>、<list-item>、<tabs>时生效。</p> 181</div></div> 182</td> 183</tr> 184<tr id="zh-cn_topic_0000001127125060_row438316531843"><td class="cellrowborder" valign="top" width="18.209640397857694%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125060_a82c323a994634032963169eeee1a55e4"><a name="zh-cn_topic_0000001127125060_a82c323a994634032963169eeee1a55e4"></a><a name="zh-cn_topic_0000001127125060_a82c323a994634032963169eeee1a55e4"></a>flex-basis</p> 185</td> 186<td class="cellrowborder" valign="top" width="14.135424636572303%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125060_p1148910787"><a name="zh-cn_topic_0000001127125060_p1148910787"></a><a name="zh-cn_topic_0000001127125060_p1148910787"></a><length></p> 187<p id="zh-cn_topic_0000001127125060_a43613cf0c2184c0d8b44e8d292f6edb7"><a name="zh-cn_topic_0000001127125060_a43613cf0c2184c0d8b44e8d292f6edb7"></a><a name="zh-cn_topic_0000001127125060_a43613cf0c2184c0d8b44e8d292f6edb7"></a></p> 188</td> 189<td class="cellrowborder" valign="top" width="22.083014537107886%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125060_ab9e1c7dc25f840e58993af05c1d32109"><a name="zh-cn_topic_0000001127125060_ab9e1c7dc25f840e58993af05c1d32109"></a><a name="zh-cn_topic_0000001127125060_ab9e1c7dc25f840e58993af05c1d32109"></a>-</p> 190</td> 191<td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125060_p124162561774"><a name="zh-cn_topic_0000001127125060_p124162561774"></a><a name="zh-cn_topic_0000001127125060_p124162561774"></a>否</p> 192</td> 193<td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125060_p192811541574"><a name="zh-cn_topic_0000001127125060_p192811541574"></a><a name="zh-cn_topic_0000001127125060_p192811541574"></a>设置分割线在主轴方向上的初始大小。</p> 194<div class="note" id="zh-cn_topic_0000001127125060_note162817541279"><a name="zh-cn_topic_0000001127125060_note162817541279"></a><a name="zh-cn_topic_0000001127125060_note162817541279"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001127125060_p1928115418713"><a name="zh-cn_topic_0000001127125060_p1928115418713"></a><a name="zh-cn_topic_0000001127125060_p1928115418713"></a>仅父容器为<div>、<list-item>、<tabs>时生效。</p> 195</div></div> 196</td> 197</tr> 198</tbody> 199</table> 200 201## 事件<a name="zh-cn_topic_0000001127125060_section1944813319536"></a> 202 203不支持。 204 205## 方法<a name="zh-cn_topic_0000001127125060_section163401342195315"></a> 206 207不支持。 208 209## 示例<a name="zh-cn_topic_0000001127125060_section230641814493"></a> 210 211``` 212<!-- xxx.hml --> 213<div class="container"> 214 <div class="content"> 215 <divider class="divider" vertical="false"></divider> 216 </div> 217</div> 218``` 219 220``` 221/* xxx.css */ 222.container { 223 margin: 20px; 224 flex-direction:column; 225 width:100%; 226 height:100%; 227 align-items:center; 228} 229.content{ 230 width:80%; 231 height:40%; 232 border:1px solid #000000; 233 align-items: center; 234 justify-content: center; 235 flex-direction:column; 236} 237.divider { 238 margin: 10px; 239 color: #ff0000ff; 240 stroke-width: 3px; 241 line-cap: round; 242} 243``` 244 245 246 247
