1# div<a name="ZH-CN_TOPIC_0000001209570693"></a> 2 3基础容器，用作页面结构的根节点或将内容进行分组。 4 5## 权限列表<a name="zh-cn_topic_0000001127125106_section11257113618419"></a> 6 7无 8 9## 子组件<a name="zh-cn_topic_0000001127125106_section9288143101012"></a> 10 11支持。 12 13## 属性<a name="zh-cn_topic_0000001127125106_section2907183951110"></a> 14 15支持[通用属性](js-components-common-attributes.md)。 16 17## 样式<a name="zh-cn_topic_0000001127125106_section10683162023215"></a> 18 19除支持[组件通用样式](js-components-common-styles.md)外，还支持如下样式： 20 21<a name="zh-cn_topic_0000001127125106_table268312017326"></a> 22<table><thead align="left"><tr id="zh-cn_topic_0000001127125106_row1268413205327"><th class="cellrowborder" valign="top" width="21.18788121187881%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127125106_p76841320163214"><a name="zh-cn_topic_0000001127125106_p76841320163214"></a><a name="zh-cn_topic_0000001127125106_p76841320163214"></a>名称</p> 23</th> 24<th class="cellrowborder" valign="top" width="16.648335166483353%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127125106_p1068492019329"><a name="zh-cn_topic_0000001127125106_p1068492019329"></a><a name="zh-cn_topic_0000001127125106_p1068492019329"></a>类型</p> 25</th> 26<th class="cellrowborder" valign="top" width="13.618638136186382%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127125106_p1468462043218"><a name="zh-cn_topic_0000001127125106_p1468462043218"></a><a name="zh-cn_topic_0000001127125106_p1468462043218"></a>默认值</p> 27</th> 28<th class="cellrowborder" valign="top" width="7.329267073292671%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127125106_p968416201324"><a name="zh-cn_topic_0000001127125106_p968416201324"></a><a name="zh-cn_topic_0000001127125106_p968416201324"></a>必填</p> 29</th> 30<th class="cellrowborder" valign="top" width="41.21587841215879%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127125106_p1068412019321"><a name="zh-cn_topic_0000001127125106_p1068412019321"></a><a name="zh-cn_topic_0000001127125106_p1068412019321"></a>描述</p> 31</th> 32</tr> 33</thead> 34<tbody><tr id="zh-cn_topic_0000001127125106_row1768452033213"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p1868410208328"><a name="zh-cn_topic_0000001127125106_p1868410208328"></a><a name="zh-cn_topic_0000001127125106_p1868410208328"></a>flex-direction</p> 35</td> 36<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p16684720193210"><a name="zh-cn_topic_0000001127125106_p16684720193210"></a><a name="zh-cn_topic_0000001127125106_p16684720193210"></a>string</p> 37</td> 38<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p168432083216"><a name="zh-cn_topic_0000001127125106_p168432083216"></a><a name="zh-cn_topic_0000001127125106_p168432083216"></a>row</p> 39</td> 40<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p26841120163215"><a name="zh-cn_topic_0000001127125106_p26841120163215"></a><a name="zh-cn_topic_0000001127125106_p26841120163215"></a>否</p> 41</td> 42<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p9684162011326"><a name="zh-cn_topic_0000001127125106_p9684162011326"></a><a name="zh-cn_topic_0000001127125106_p9684162011326"></a>flex容器主轴方向。可选项有：</p> 43<a name="zh-cn_topic_0000001127125106_ul166842020123216"></a><a name="zh-cn_topic_0000001127125106_ul166842020123216"></a><ul id="zh-cn_topic_0000001127125106_ul166842020123216"><li>column：垂直方向从上到下。</li><li>row：水平方向从左到右。</li></ul> 44</td> 45</tr> 46<tr id="zh-cn_topic_0000001127125106_row1568472073219"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p156841120203210"><a name="zh-cn_topic_0000001127125106_p156841120203210"></a><a name="zh-cn_topic_0000001127125106_p156841120203210"></a>flex-wrap</p> 47</td> 48<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p668422017329"><a name="zh-cn_topic_0000001127125106_p668422017329"></a><a name="zh-cn_topic_0000001127125106_p668422017329"></a>string</p> 49</td> 50<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p176841220203217"><a name="zh-cn_topic_0000001127125106_p176841220203217"></a><a name="zh-cn_topic_0000001127125106_p176841220203217"></a>nowrap</p> 51</td> 52<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p16851520143211"><a name="zh-cn_topic_0000001127125106_p16851520143211"></a><a name="zh-cn_topic_0000001127125106_p16851520143211"></a>否</p> 53</td> 54<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p9685102083216"><a name="zh-cn_topic_0000001127125106_p9685102083216"></a><a name="zh-cn_topic_0000001127125106_p9685102083216"></a>flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：</p> 55<a name="zh-cn_topic_0000001127125106_ul2685520133215"></a><a name="zh-cn_topic_0000001127125106_ul2685520133215"></a><ul id="zh-cn_topic_0000001127125106_ul2685520133215"><li>nowrap：不换行，单行显示。</li><li>wrap：换行，多行显示。</li></ul> 56</td> 57</tr> 58<tr id="zh-cn_topic_0000001127125106_row56851920123213"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p56857201320"><a name="zh-cn_topic_0000001127125106_p56857201320"></a><a name="zh-cn_topic_0000001127125106_p56857201320"></a>justify-content</p> 59</td> 60<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p268572015329"><a name="zh-cn_topic_0000001127125106_p268572015329"></a><a name="zh-cn_topic_0000001127125106_p268572015329"></a>string</p> 61</td> 62<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p96851220103216"><a name="zh-cn_topic_0000001127125106_p96851220103216"></a><a name="zh-cn_topic_0000001127125106_p96851220103216"></a>flex-start</p> 63</td> 64<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p1368522019327"><a name="zh-cn_topic_0000001127125106_p1368522019327"></a><a name="zh-cn_topic_0000001127125106_p1368522019327"></a>否</p> 65</td> 66<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p2685520183214"><a name="zh-cn_topic_0000001127125106_p2685520183214"></a><a name="zh-cn_topic_0000001127125106_p2685520183214"></a>flex容器当前行的主轴对齐格式。可选项有：</p> 67<a name="zh-cn_topic_0000001127125106_ul10685142083220"></a><a name="zh-cn_topic_0000001127125106_ul10685142083220"></a><ul id="zh-cn_topic_0000001127125106_ul10685142083220"><li>flex-start：项目位于容器的开头。</li><li>flex-end：项目位于容器的结尾。</li><li>center：项目位于容器的中心。</li><li>space-between：项目位于各行之间留有空白的容器内。</li><li>space-around：项目位于各行之前、之间、之后都留有空白的容器内。</li><li>space-evenly<sup id="zh-cn_topic_0000001127125106_sup11685320153214"><a name="zh-cn_topic_0000001127125106_sup11685320153214"></a><a name="zh-cn_topic_0000001127125106_sup11685320153214"></a><span>5+</span></sup>: 均匀排列每个元素，每个元素之间的间隔相等。</li></ul> 68</td> 69</tr> 70<tr id="zh-cn_topic_0000001127125106_row1268518207327"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p16685172073216"><a name="zh-cn_topic_0000001127125106_p16685172073216"></a><a name="zh-cn_topic_0000001127125106_p16685172073216"></a>align-items</p> 71</td> 72<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p14686102043215"><a name="zh-cn_topic_0000001127125106_p14686102043215"></a><a name="zh-cn_topic_0000001127125106_p14686102043215"></a>string</p> 73</td> 74<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p12686192073219"><a name="zh-cn_topic_0000001127125106_p12686192073219"></a><a name="zh-cn_topic_0000001127125106_p12686192073219"></a>stretch</p> 75</td> 76<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p968619206323"><a name="zh-cn_topic_0000001127125106_p968619206323"></a><a name="zh-cn_topic_0000001127125106_p968619206323"></a>否</p> 77</td> 78<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p968612093212"><a name="zh-cn_topic_0000001127125106_p968612093212"></a><a name="zh-cn_topic_0000001127125106_p968612093212"></a>flex容器当前行的交叉轴对齐格式，可选值为：</p> 79<a name="zh-cn_topic_0000001127125106_ul1668642083219"></a><a name="zh-cn_topic_0000001127125106_ul1668642083219"></a><ul id="zh-cn_topic_0000001127125106_ul1668642083219"><li>stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。</li><li>flex-start：元素向交叉轴起点对齐。</li><li>flex-end：元素向交叉轴终点对齐。</li><li>center：元素在交叉轴居中。</li></ul> 80</td> 81</tr> 82<tr id="zh-cn_topic_0000001127125106_row13686520193219"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p18686620103213"><a name="zh-cn_topic_0000001127125106_p18686620103213"></a><a name="zh-cn_topic_0000001127125106_p18686620103213"></a>align-content</p> 83</td> 84<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p368682043219"><a name="zh-cn_topic_0000001127125106_p368682043219"></a><a name="zh-cn_topic_0000001127125106_p368682043219"></a>string</p> 85</td> 86<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p76864208322"><a name="zh-cn_topic_0000001127125106_p76864208322"></a><a name="zh-cn_topic_0000001127125106_p76864208322"></a>flex-start</p> 87</td> 88<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p17687720143219"><a name="zh-cn_topic_0000001127125106_p17687720143219"></a><a name="zh-cn_topic_0000001127125106_p17687720143219"></a>否</p> 89</td> 90<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p10687112023210"><a name="zh-cn_topic_0000001127125106_p10687112023210"></a><a name="zh-cn_topic_0000001127125106_p10687112023210"></a>交叉轴中有额外的空间时，多行内容对齐格式，可选值为：</p> 91<a name="zh-cn_topic_0000001127125106_ul156878209329"></a><a name="zh-cn_topic_0000001127125106_ul156878209329"></a><ul id="zh-cn_topic_0000001127125106_ul156878209329"><li>flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。</li><li>flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。</li><li>center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。</li><li>space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。</li><li>space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。</li></ul> 92</td> 93</tr> 94<tr id="zh-cn_topic_0000001127125106_row668711200324"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p1368732083214"><a name="zh-cn_topic_0000001127125106_p1368732083214"></a><a name="zh-cn_topic_0000001127125106_p1368732083214"></a>display</p> 95</td> 96<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p8687320183211"><a name="zh-cn_topic_0000001127125106_p8687320183211"></a><a name="zh-cn_topic_0000001127125106_p8687320183211"></a>string</p> 97</td> 98<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p168742043213"><a name="zh-cn_topic_0000001127125106_p168742043213"></a><a name="zh-cn_topic_0000001127125106_p168742043213"></a>flex</p> 99</td> 100<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p36871820113217"><a name="zh-cn_topic_0000001127125106_p36871820113217"></a><a name="zh-cn_topic_0000001127125106_p36871820113217"></a>否</p> 101</td> 102<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p7687920123212"><a name="zh-cn_topic_0000001127125106_p7687920123212"></a><a name="zh-cn_topic_0000001127125106_p7687920123212"></a>确定该元素视图框的类型，该值暂不支持动态修改。可选值为：</p> 103<a name="zh-cn_topic_0000001127125106_ul168702017322"></a><a name="zh-cn_topic_0000001127125106_ul168702017322"></a><ul id="zh-cn_topic_0000001127125106_ul168702017322"><li>flex：弹性布局</li><li>grid：网格布局</li><li>none：不渲染此元素</li></ul> 104</td> 105</tr> 106<tr id="zh-cn_topic_0000001127125106_row136872020123214"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p126872208322"><a name="zh-cn_topic_0000001127125106_p126872208322"></a><a name="zh-cn_topic_0000001127125106_p126872208322"></a>grid-template-[columns|rows]</p> 107</td> 108<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p9687142016324"><a name="zh-cn_topic_0000001127125106_p9687142016324"></a><a name="zh-cn_topic_0000001127125106_p9687142016324"></a>string</p> 109</td> 110<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p9688112033216"><a name="zh-cn_topic_0000001127125106_p9688112033216"></a><a name="zh-cn_topic_0000001127125106_p9688112033216"></a>1行1列</p> 111</td> 112<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p1068812003213"><a name="zh-cn_topic_0000001127125106_p1068812003213"></a><a name="zh-cn_topic_0000001127125106_p1068812003213"></a>否</p> 113</td> 114<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p186883207326"><a name="zh-cn_topic_0000001127125106_p186883207326"></a><a name="zh-cn_topic_0000001127125106_p186883207326"></a>用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。</p> 115<p id="zh-cn_topic_0000001127125106_p7688172013211"><a name="zh-cn_topic_0000001127125106_p7688172013211"></a><a name="zh-cn_topic_0000001127125106_p7688172013211"></a>示例：如设置grid-template-columns为：</p> 116<a name="zh-cn_topic_0000001127125106_ul3688920133220"></a><a name="zh-cn_topic_0000001127125106_ul3688920133220"></a><ul id="zh-cn_topic_0000001127125106_ul3688920133220"><li>50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；</li><li>1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；</li><li>30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；</li><li>repeat(2,100px)：分两列，第一列100px，第二列100px；</li><li>repeat(auto-fill,100px)<sup id="zh-cn_topic_0000001127125106_sup3688112073216"><a name="zh-cn_topic_0000001127125106_sup3688112073216"></a><a name="zh-cn_topic_0000001127125106_sup3688112073216"></a>5+</sup>：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；</li><li>auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。</li></ul> 117</td> 118</tr> 119<tr id="zh-cn_topic_0000001127125106_row106881920143218"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p66881020173213"><a name="zh-cn_topic_0000001127125106_p66881020173213"></a><a name="zh-cn_topic_0000001127125106_p66881020173213"></a>grid-[columns|rows]-gap</p> 120</td> 121<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p16688192063214"><a name="zh-cn_topic_0000001127125106_p16688192063214"></a><a name="zh-cn_topic_0000001127125106_p16688192063214"></a><length></p> 122</td> 123<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p15688920143215"><a name="zh-cn_topic_0000001127125106_p15688920143215"></a><a name="zh-cn_topic_0000001127125106_p15688920143215"></a>0</p> 124</td> 125<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p16688162003215"><a name="zh-cn_topic_0000001127125106_p16688162003215"></a><a name="zh-cn_topic_0000001127125106_p16688162003215"></a>否</p> 126</td> 127<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p96881920183213"><a name="zh-cn_topic_0000001127125106_p96881920183213"></a><a name="zh-cn_topic_0000001127125106_p96881920183213"></a>用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。</p> 128</td> 129</tr> 130<tr id="zh-cn_topic_0000001127125106_row1268882053219"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p1668942011327"><a name="zh-cn_topic_0000001127125106_p1668942011327"></a><a name="zh-cn_topic_0000001127125106_p1668942011327"></a>grid-row-[start|end]</p> 131</td> 132<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p11689620143210"><a name="zh-cn_topic_0000001127125106_p11689620143210"></a><a name="zh-cn_topic_0000001127125106_p11689620143210"></a>number</p> 133</td> 134<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p66891920143215"><a name="zh-cn_topic_0000001127125106_p66891920143215"></a><a name="zh-cn_topic_0000001127125106_p66891920143215"></a>-</p> 135</td> 136<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p17689152083218"><a name="zh-cn_topic_0000001127125106_p17689152083218"></a><a name="zh-cn_topic_0000001127125106_p17689152083218"></a>否</p> 137</td> 138<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p16689132033212"><a name="zh-cn_topic_0000001127125106_p16689132033212"></a><a name="zh-cn_topic_0000001127125106_p16689132033212"></a>用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。</p> 139</td> 140</tr> 141<tr id="zh-cn_topic_0000001127125106_row1968942013212"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p26894201323"><a name="zh-cn_topic_0000001127125106_p26894201323"></a><a name="zh-cn_topic_0000001127125106_p26894201323"></a>grid-column-[start|end]</p> 142</td> 143<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p18689122018329"><a name="zh-cn_topic_0000001127125106_p18689122018329"></a><a name="zh-cn_topic_0000001127125106_p18689122018329"></a>number</p> 144</td> 145<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p26894206327"><a name="zh-cn_topic_0000001127125106_p26894206327"></a><a name="zh-cn_topic_0000001127125106_p26894206327"></a>-</p> 146</td> 147<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p668914203321"><a name="zh-cn_topic_0000001127125106_p668914203321"></a><a name="zh-cn_topic_0000001127125106_p668914203321"></a>否</p> 148</td> 149<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p1168942083212"><a name="zh-cn_topic_0000001127125106_p1168942083212"></a><a name="zh-cn_topic_0000001127125106_p1168942083212"></a>用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。</p> 150</td> 151</tr> 152<tr id="zh-cn_topic_0000001127125106_row1689120153217"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p368912011325"><a name="zh-cn_topic_0000001127125106_p368912011325"></a><a name="zh-cn_topic_0000001127125106_p368912011325"></a>grid-auto-flow<sup id="zh-cn_topic_0000001127125106_sup26892020153214"><a name="zh-cn_topic_0000001127125106_sup26892020153214"></a><a name="zh-cn_topic_0000001127125106_sup26892020153214"></a>5+</sup></p> 153</td> 154<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p20689112043215"><a name="zh-cn_topic_0000001127125106_p20689112043215"></a><a name="zh-cn_topic_0000001127125106_p20689112043215"></a>string</p> 155</td> 156<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p186893207322"><a name="zh-cn_topic_0000001127125106_p186893207322"></a><a name="zh-cn_topic_0000001127125106_p186893207322"></a>-</p> 157</td> 158<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p20689182003216"><a name="zh-cn_topic_0000001127125106_p20689182003216"></a><a name="zh-cn_topic_0000001127125106_p20689182003216"></a>否</p> 159</td> 160<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p176891320123210"><a name="zh-cn_topic_0000001127125106_p176891320123210"></a><a name="zh-cn_topic_0000001127125106_p176891320123210"></a>使用框架自动布局算法进行网格的布局，可选值为：</p> 161<a name="zh-cn_topic_0000001127125106_ul12689152083220"></a><a name="zh-cn_topic_0000001127125106_ul12689152083220"></a><ul id="zh-cn_topic_0000001127125106_ul12689152083220"><li>row：逐行填充元素，如果行空间不够，则新增行；</li><li>column：逐列填充元素，如果列空间不够，则新增列。</li></ul> 162</td> 163</tr> 164<tr id="zh-cn_topic_0000001127125106_row8465152118595"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p446513211597"><a name="zh-cn_topic_0000001127125106_p446513211597"></a><a name="zh-cn_topic_0000001127125106_p446513211597"></a>overflow<sup id="zh-cn_topic_0000001127125106_sup14860336125911"><a name="zh-cn_topic_0000001127125106_sup14860336125911"></a><a name="zh-cn_topic_0000001127125106_sup14860336125911"></a>6+</sup></p> 165</td> 166<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p6465172105918"><a name="zh-cn_topic_0000001127125106_p6465172105918"></a><a name="zh-cn_topic_0000001127125106_p6465172105918"></a>string</p> 167</td> 168<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p1546592111596"><a name="zh-cn_topic_0000001127125106_p1546592111596"></a><a name="zh-cn_topic_0000001127125106_p1546592111596"></a>visible</p> 169</td> 170<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p18465221125911"><a name="zh-cn_topic_0000001127125106_p18465221125911"></a><a name="zh-cn_topic_0000001127125106_p18465221125911"></a>否</p> 171</td> 172<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p146532175915"><a name="zh-cn_topic_0000001127125106_p146532175915"></a><a name="zh-cn_topic_0000001127125106_p146532175915"></a>设置元素内容区超过元素本身大小时的表现形式。</p> 173<a name="zh-cn_topic_0000001127125106_ul531213221202"></a><a name="zh-cn_topic_0000001127125106_ul531213221202"></a><ul id="zh-cn_topic_0000001127125106_ul531213221202"><li>visible：多个子元素内容超过元素大小时，显示在元素外面；</li><li>hidden：元素内容超过元素大小时，进行裁切显示；</li><li>scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。</li></ul> 174<div class="note" id="zh-cn_topic_0000001127125106_note1571135818019"><a name="zh-cn_topic_0000001127125106_note1571135818019"></a><a name="zh-cn_topic_0000001127125106_note1571135818019"></a><span class="notetitle"> 说明： </span><div class="notebody"><a name="zh-cn_topic_0000001127125106_ul8327981218"></a><a name="zh-cn_topic_0000001127125106_ul8327981218"></a><ul id="zh-cn_topic_0000001127125106_ul8327981218"><li>overflow: scroll样式需要元素设置固定的大小。</li></ul> 175</div></div> 176</td> 177</tr> 178<tr id="zh-cn_topic_0000001127125106_row83713507010"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p2037105016016"><a name="zh-cn_topic_0000001127125106_p2037105016016"></a><a name="zh-cn_topic_0000001127125106_p2037105016016"></a>align-items<sup id="zh-cn_topic_0000001127125106_sup1453123611119"><a name="zh-cn_topic_0000001127125106_sup1453123611119"></a><a name="zh-cn_topic_0000001127125106_sup1453123611119"></a><span>6+</span></sup></p> 179</td> 180<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p183721550309"><a name="zh-cn_topic_0000001127125106_p183721550309"></a><a name="zh-cn_topic_0000001127125106_p183721550309"></a>string</p> 181</td> 182<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p5372165019019"><a name="zh-cn_topic_0000001127125106_p5372165019019"></a><a name="zh-cn_topic_0000001127125106_p5372165019019"></a>-</p> 183</td> 184<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p93721501701"><a name="zh-cn_topic_0000001127125106_p93721501701"></a><a name="zh-cn_topic_0000001127125106_p93721501701"></a>否</p> 185</td> 186<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p17372155018015"><a name="zh-cn_topic_0000001127125106_p17372155018015"></a><a name="zh-cn_topic_0000001127125106_p17372155018015"></a>设置容器中元素交叉轴上的对齐方式：</p> 187<a name="zh-cn_topic_0000001127125106_ul7910135512514"></a><a name="zh-cn_topic_0000001127125106_ul7910135512514"></a><ul id="zh-cn_topic_0000001127125106_ul7910135512514"><li>stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；</li><li>flex-start：Flex布局容器内元素向交叉轴起点对齐；</li><li>flex-end：Flex布局容器内元素向交叉轴终点对齐；</li><li>center：Flex布局容器内元素在交叉轴居中对齐；</li><li>baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。</li></ul> 188</td> 189</tr> 190<tr id="zh-cn_topic_0000001127125106_row1629945313212"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p829911534213"><a name="zh-cn_topic_0000001127125106_p829911534213"></a><a name="zh-cn_topic_0000001127125106_p829911534213"></a>scrollbar-color<sup id="zh-cn_topic_0000001127125106_sup843916381239"><a name="zh-cn_topic_0000001127125106_sup843916381239"></a><a name="zh-cn_topic_0000001127125106_sup843916381239"></a>6+</sup></p> 191</td> 192<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p122991553112113"><a name="zh-cn_topic_0000001127125106_p122991553112113"></a><a name="zh-cn_topic_0000001127125106_p122991553112113"></a><color></p> 193</td> 194<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p17299253132120"><a name="zh-cn_topic_0000001127125106_p17299253132120"></a><a name="zh-cn_topic_0000001127125106_p17299253132120"></a>-</p> 195</td> 196<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p9299135342110"><a name="zh-cn_topic_0000001127125106_p9299135342110"></a><a name="zh-cn_topic_0000001127125106_p9299135342110"></a>否</p> 197</td> 198<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p14300165317215"><a name="zh-cn_topic_0000001127125106_p14300165317215"></a><a name="zh-cn_topic_0000001127125106_p14300165317215"></a>设置滚动条的颜色。</p> 199</td> 200</tr> 201<tr id="zh-cn_topic_0000001127125106_row17334859142112"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p1433575912212"><a name="zh-cn_topic_0000001127125106_p1433575912212"></a><a name="zh-cn_topic_0000001127125106_p1433575912212"></a>scrollbar-width<sup id="zh-cn_topic_0000001127125106_sup10700174022317"><a name="zh-cn_topic_0000001127125106_sup10700174022317"></a><a name="zh-cn_topic_0000001127125106_sup10700174022317"></a>6+</sup></p> 202</td> 203<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p3335165919217"><a name="zh-cn_topic_0000001127125106_p3335165919217"></a><a name="zh-cn_topic_0000001127125106_p3335165919217"></a><length></p> 204</td> 205<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p6335175914219"><a name="zh-cn_topic_0000001127125106_p6335175914219"></a><a name="zh-cn_topic_0000001127125106_p6335175914219"></a>-</p> 206</td> 207<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p13335759172115"><a name="zh-cn_topic_0000001127125106_p13335759172115"></a><a name="zh-cn_topic_0000001127125106_p13335759172115"></a>否</p> 208</td> 209<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p533510595217"><a name="zh-cn_topic_0000001127125106_p533510595217"></a><a name="zh-cn_topic_0000001127125106_p533510595217"></a>设置滚动条的宽度。</p> 210</td> 211</tr> 212<tr id="zh-cn_topic_0000001127125106_row103571044227"><td class="cellrowborder" valign="top" width="21.18788121187881%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125106_p23581146229"><a name="zh-cn_topic_0000001127125106_p23581146229"></a><a name="zh-cn_topic_0000001127125106_p23581146229"></a>overscroll-effect<sup id="zh-cn_topic_0000001127125106_sup8319241142311"><a name="zh-cn_topic_0000001127125106_sup8319241142311"></a><a name="zh-cn_topic_0000001127125106_sup8319241142311"></a>6+</sup></p> 213</td> 214<td class="cellrowborder" valign="top" width="16.648335166483353%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125106_p17358204182217"><a name="zh-cn_topic_0000001127125106_p17358204182217"></a><a name="zh-cn_topic_0000001127125106_p17358204182217"></a>string</p> 215</td> 216<td class="cellrowborder" valign="top" width="13.618638136186382%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125106_p4358124122211"><a name="zh-cn_topic_0000001127125106_p4358124122211"></a><a name="zh-cn_topic_0000001127125106_p4358124122211"></a>-</p> 217</td> 218<td class="cellrowborder" valign="top" width="7.329267073292671%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125106_p1835816422213"><a name="zh-cn_topic_0000001127125106_p1835816422213"></a><a name="zh-cn_topic_0000001127125106_p1835816422213"></a>否</p> 219</td> 220<td class="cellrowborder" valign="top" width="41.21587841215879%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125106_p153581140221"><a name="zh-cn_topic_0000001127125106_p153581140221"></a><a name="zh-cn_topic_0000001127125106_p153581140221"></a>设置滚动边缘效果，可选值为：</p> 221<a name="zh-cn_topic_0000001127125106_ul2660123592519"></a><a name="zh-cn_topic_0000001127125106_ul2660123592519"></a><ul id="zh-cn_topic_0000001127125106_ul2660123592519"><li>spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；</li><li>fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；</li><li>none：滑动到边缘后无效果</li></ul> 222</td> 223</tr> 224</tbody> 225</table> 226 227## 事件<a name="zh-cn_topic_0000001127125106_section77341431152917"></a> 228 229除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 230 231<a name="zh-cn_topic_0000001127125106_tf7a840896dc848b5ab17a18b50036601"></a> 232<table><thead align="left"><tr id="zh-cn_topic_0000001127125106_rf3d0da15d2f64cd492dfa1e7d98890a5"><th class="cellrowborder" valign="top" width="16.18%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001127125106_a487aa1c493e84ca68567b4b65051674d"><a name="zh-cn_topic_0000001127125106_a487aa1c493e84ca68567b4b65051674d"></a><a name="zh-cn_topic_0000001127125106_a487aa1c493e84ca68567b4b65051674d"></a>名称</p> 233</th> 234<th class="cellrowborder" valign="top" width="21.89%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001127125106_adc4b506cda3043508da6ee7649c12ca4"><a name="zh-cn_topic_0000001127125106_adc4b506cda3043508da6ee7649c12ca4"></a><a name="zh-cn_topic_0000001127125106_adc4b506cda3043508da6ee7649c12ca4"></a>参数</p> 235</th> 236<th class="cellrowborder" valign="top" width="61.92999999999999%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001127125106_a59e4cbe58a5c42a7a4585bc8365783bc"><a name="zh-cn_topic_0000001127125106_a59e4cbe58a5c42a7a4585bc8365783bc"></a><a name="zh-cn_topic_0000001127125106_a59e4cbe58a5c42a7a4585bc8365783bc"></a>描述</p> 237</th> 238</tr> 239</thead> 240<tbody><tr id="zh-cn_topic_0000001127125106_row19193181433116"><td class="cellrowborder" valign="top" width="16.18%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125106_p919321419315"><a name="zh-cn_topic_0000001127125106_p919321419315"></a><a name="zh-cn_topic_0000001127125106_p919321419315"></a>reachstart<sup id="zh-cn_topic_0000001127125106_sup18542427173112"><a name="zh-cn_topic_0000001127125106_sup18542427173112"></a><a name="zh-cn_topic_0000001127125106_sup18542427173112"></a><span>6+</span></sup></p> 241</td> 242<td class="cellrowborder" valign="top" width="21.89%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125106_p11805161217520"><a name="zh-cn_topic_0000001127125106_p11805161217520"></a><a name="zh-cn_topic_0000001127125106_p11805161217520"></a>-</p> 243</td> 244<td class="cellrowborder" valign="top" width="61.92999999999999%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125106_p617863613413"><a name="zh-cn_topic_0000001127125106_p617863613413"></a><a name="zh-cn_topic_0000001127125106_p617863613413"></a>当页面滑动到最开始的点时触发的事件回调，当flex-direction: row时才会触发。</p> 245</td> 246</tr> 247<tr id="zh-cn_topic_0000001127125106_row1812350173410"><td class="cellrowborder" valign="top" width="16.18%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125106_p3812150173411"><a name="zh-cn_topic_0000001127125106_p3812150173411"></a><a name="zh-cn_topic_0000001127125106_p3812150173411"></a>reachend<sup id="zh-cn_topic_0000001127125106_sup1959668163514"><a name="zh-cn_topic_0000001127125106_sup1959668163514"></a><a name="zh-cn_topic_0000001127125106_sup1959668163514"></a>6+</sup></p> 248</td> 249<td class="cellrowborder" valign="top" width="21.89%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125106_p173576151454"><a name="zh-cn_topic_0000001127125106_p173576151454"></a><a name="zh-cn_topic_0000001127125106_p173576151454"></a>-</p> 250</td> 251<td class="cellrowborder" valign="top" width="61.92999999999999%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125106_p1480216408412"><a name="zh-cn_topic_0000001127125106_p1480216408412"></a><a name="zh-cn_topic_0000001127125106_p1480216408412"></a>当页面滑动到最末尾的点时触发的事件回调，当flex-direction: row时才会触发。</p> 252</td> 253</tr> 254<tr id="zh-cn_topic_0000001127125106_row177991024193516"><td class="cellrowborder" valign="top" width="16.18%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125106_p1799132411359"><a name="zh-cn_topic_0000001127125106_p1799132411359"></a><a name="zh-cn_topic_0000001127125106_p1799132411359"></a>reachtop<sup id="zh-cn_topic_0000001127125106_sup126311239153512"><a name="zh-cn_topic_0000001127125106_sup126311239153512"></a><a name="zh-cn_topic_0000001127125106_sup126311239153512"></a>6+</sup></p> 255</td> 256<td class="cellrowborder" valign="top" width="21.89%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125106_p93757171511"><a name="zh-cn_topic_0000001127125106_p93757171511"></a><a name="zh-cn_topic_0000001127125106_p93757171511"></a>-</p> 257</td> 258<td class="cellrowborder" valign="top" width="61.92999999999999%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125106_p1841194517415"><a name="zh-cn_topic_0000001127125106_p1841194517415"></a><a name="zh-cn_topic_0000001127125106_p1841194517415"></a>当页面滑动到最上部的点时触发的事件回调，当flex-direction: column时才会触发。</p> 259</td> 260</tr> 261<tr id="zh-cn_topic_0000001127125106_row2849452153619"><td class="cellrowborder" valign="top" width="16.18%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125106_p11850135219366"><a name="zh-cn_topic_0000001127125106_p11850135219366"></a><a name="zh-cn_topic_0000001127125106_p11850135219366"></a>reachbottom<sup id="zh-cn_topic_0000001127125106_sup66531160375"><a name="zh-cn_topic_0000001127125106_sup66531160375"></a><a name="zh-cn_topic_0000001127125106_sup66531160375"></a>6+</sup></p> 262</td> 263<td class="cellrowborder" valign="top" width="21.89%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125106_p798910191353"><a name="zh-cn_topic_0000001127125106_p798910191353"></a><a name="zh-cn_topic_0000001127125106_p798910191353"></a>-</p> 264</td> 265<td class="cellrowborder" valign="top" width="61.92999999999999%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125106_p1885010522361"><a name="zh-cn_topic_0000001127125106_p1885010522361"></a><a name="zh-cn_topic_0000001127125106_p1885010522361"></a>当页面滑动到最下部的点时触发的事件回调，当flex-direction: column时才会触发。</p> 266</td> 267</tr> 268</tbody> 269</table> 270 271## 方法<a name="zh-cn_topic_0000001127125106_section2279124532420"></a> 272 273除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 274 275<a name="zh-cn_topic_0000001127125106_table20753173210251"></a> 276<table><thead align="left"><tr id="zh-cn_topic_0000001127125106_row575363214257"><th class="cellrowborder" valign="top" width="17.07%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001127125106_p157531032112517"><a name="zh-cn_topic_0000001127125106_p157531032112517"></a><a name="zh-cn_topic_0000001127125106_p157531032112517"></a>名称</p> 277</th> 278<th class="cellrowborder" valign="top" width="11.84%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001127125106_p77531632132518"><a name="zh-cn_topic_0000001127125106_p77531632132518"></a><a name="zh-cn_topic_0000001127125106_p77531632132518"></a>参数</p> 279</th> 280<th class="cellrowborder" valign="top" width="13.66%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001127125106_p817515404414"><a name="zh-cn_topic_0000001127125106_p817515404414"></a><a name="zh-cn_topic_0000001127125106_p817515404414"></a>返回值</p> 281</th> 282<th class="cellrowborder" valign="top" width="57.43000000000001%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001127125106_p147531232132512"><a name="zh-cn_topic_0000001127125106_p147531232132512"></a><a name="zh-cn_topic_0000001127125106_p147531232132512"></a>描述</p> 283</th> 284</tr> 285</thead> 286<tbody><tr id="zh-cn_topic_0000001127125106_row15753113210251"><td class="cellrowborder" valign="top" width="17.07%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125106_p2314135812511"><a name="zh-cn_topic_0000001127125106_p2314135812511"></a><a name="zh-cn_topic_0000001127125106_p2314135812511"></a>getScrollOffset<sup id="zh-cn_topic_0000001127125106_sup663342216185"><a name="zh-cn_topic_0000001127125106_sup663342216185"></a><a name="zh-cn_topic_0000001127125106_sup663342216185"></a><span>6+</span></sup></p> 287</td> 288<td class="cellrowborder" valign="top" width="11.84%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125106_p7314115819256"><a name="zh-cn_topic_0000001127125106_p7314115819256"></a><a name="zh-cn_topic_0000001127125106_p7314115819256"></a>-</p> 289</td> 290<td class="cellrowborder" valign="top" width="13.66%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125106_p2017514401045"><a name="zh-cn_topic_0000001127125106_p2017514401045"></a><a name="zh-cn_topic_0000001127125106_p2017514401045"></a><a href="#zh-cn_topic_0000001127125106_table154011838131719">ScrollOffset</a></p> 291</td> 292<td class="cellrowborder" valign="top" width="57.43000000000001%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125106_p0314958162512"><a name="zh-cn_topic_0000001127125106_p0314958162512"></a><a name="zh-cn_topic_0000001127125106_p0314958162512"></a>获取元素内容的滚动偏移。</p> 293<div class="note" id="zh-cn_topic_0000001127125106_note18321919610"><a name="zh-cn_topic_0000001127125106_note18321919610"></a><a name="zh-cn_topic_0000001127125106_note18321919610"></a><span class="notetitle"> 说明： </span><div class="notebody"><a name="zh-cn_topic_0000001127125106_ul873964691316"></a><a name="zh-cn_topic_0000001127125106_ul873964691316"></a><ul id="zh-cn_topic_0000001127125106_ul873964691316"><li>需要设置overflow样式为scroll。</li></ul> 294</div></div> 295</td> 296</tr> 297<tr id="zh-cn_topic_0000001127125106_row393410526251"><td class="cellrowborder" valign="top" width="17.07%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125106_p6171185561413"><a name="zh-cn_topic_0000001127125106_p6171185561413"></a><a name="zh-cn_topic_0000001127125106_p6171185561413"></a>scrollBy<sup id="zh-cn_topic_0000001127125106_sup188191223181818"><a name="zh-cn_topic_0000001127125106_sup188191223181818"></a><a name="zh-cn_topic_0000001127125106_sup188191223181818"></a><span>6+</span></sup></p> 298</td> 299<td class="cellrowborder" valign="top" width="11.84%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125106_p1231455814253"><a name="zh-cn_topic_0000001127125106_p1231455814253"></a><a name="zh-cn_topic_0000001127125106_p1231455814253"></a><a href="#zh-cn_topic_0000001127125106_table1139175871819">ScrollParam</a></p> 300</td> 301<td class="cellrowborder" valign="top" width="13.66%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125106_p121756404410"><a name="zh-cn_topic_0000001127125106_p121756404410"></a><a name="zh-cn_topic_0000001127125106_p121756404410"></a>-</p> 302</td> 303<td class="cellrowborder" valign="top" width="57.43000000000001%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125106_p10314105842512"><a name="zh-cn_topic_0000001127125106_p10314105842512"></a><a name="zh-cn_topic_0000001127125106_p10314105842512"></a>指定元素内容的滚动偏移。</p> 304<div class="note" id="zh-cn_topic_0000001127125106_note3227027181713"><a name="zh-cn_topic_0000001127125106_note3227027181713"></a><a name="zh-cn_topic_0000001127125106_note3227027181713"></a><span class="notetitle"> 说明： </span><div class="notebody"><a name="zh-cn_topic_0000001127125106_ul11227027181717"></a><a name="zh-cn_topic_0000001127125106_ul11227027181717"></a><ul id="zh-cn_topic_0000001127125106_ul11227027181717"><li>需要设置overflow样式为scroll。</li></ul> 305</div></div> 306</td> 307</tr> 308</tbody> 309</table> 310 311**表 1** ScrollOffset<sup>6+</sup> 312 313<a name="zh-cn_topic_0000001127125106_table154011838131719"></a> 314<table><thead align="left"><tr id="zh-cn_topic_0000001127125106_row154011938191717"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.1"><p id="zh-cn_topic_0000001127125106_p0401153814174"><a name="zh-cn_topic_0000001127125106_p0401153814174"></a><a name="zh-cn_topic_0000001127125106_p0401153814174"></a>名称</p> 315</th> 316<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.2"><p id="zh-cn_topic_0000001127125106_p19401038111719"><a name="zh-cn_topic_0000001127125106_p19401038111719"></a><a name="zh-cn_topic_0000001127125106_p19401038111719"></a>类型</p> 317</th> 318<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="zh-cn_topic_0000001127125106_p104011438181716"><a name="zh-cn_topic_0000001127125106_p104011438181716"></a><a name="zh-cn_topic_0000001127125106_p104011438181716"></a>描述</p> 319</th> 320</tr> 321</thead> 322<tbody><tr id="zh-cn_topic_0000001127125106_row6401133811715"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125106_p0401153816171"><a name="zh-cn_topic_0000001127125106_p0401153816171"></a><a name="zh-cn_topic_0000001127125106_p0401153816171"></a>x</p> 323</td> 324<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125106_p17401183819172"><a name="zh-cn_topic_0000001127125106_p17401183819172"></a><a name="zh-cn_topic_0000001127125106_p17401183819172"></a>number</p> 325</td> 326<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125106_p1840123811176"><a name="zh-cn_topic_0000001127125106_p1840123811176"></a><a name="zh-cn_topic_0000001127125106_p1840123811176"></a>在x轴方向的偏移，单位为px。</p> 327</td> 328</tr> 329<tr id="zh-cn_topic_0000001127125106_row540103815174"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125106_p1240133811713"><a name="zh-cn_topic_0000001127125106_p1240133811713"></a><a name="zh-cn_topic_0000001127125106_p1240133811713"></a>y</p> 330</td> 331<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125106_p4402153816174"><a name="zh-cn_topic_0000001127125106_p4402153816174"></a><a name="zh-cn_topic_0000001127125106_p4402153816174"></a>number</p> 332</td> 333<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125106_p94021838121713"><a name="zh-cn_topic_0000001127125106_p94021838121713"></a><a name="zh-cn_topic_0000001127125106_p94021838121713"></a>在y轴方向的偏移，单位为px。</p> 334</td> 335</tr> 336</tbody> 337</table> 338 339**表 2** ScrollParam<sup>6+</sup> 340 341<a name="zh-cn_topic_0000001127125106_table1139175871819"></a> 342<table><thead align="left"><tr id="zh-cn_topic_0000001127125106_row161391758201815"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.1"><p id="zh-cn_topic_0000001127125106_p161396585187"><a name="zh-cn_topic_0000001127125106_p161396585187"></a><a name="zh-cn_topic_0000001127125106_p161396585187"></a>名称</p> 343</th> 344<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.2"><p id="zh-cn_topic_0000001127125106_p613975815186"><a name="zh-cn_topic_0000001127125106_p613975815186"></a><a name="zh-cn_topic_0000001127125106_p613975815186"></a>类型</p> 345</th> 346<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="zh-cn_topic_0000001127125106_p18140145861817"><a name="zh-cn_topic_0000001127125106_p18140145861817"></a><a name="zh-cn_topic_0000001127125106_p18140145861817"></a>描述</p> 347</th> 348</tr> 349</thead> 350<tbody><tr id="zh-cn_topic_0000001127125106_row41401258181817"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125106_p1140858101811"><a name="zh-cn_topic_0000001127125106_p1140858101811"></a><a name="zh-cn_topic_0000001127125106_p1140858101811"></a>dx</p> 351</td> 352<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125106_p1014085831819"><a name="zh-cn_topic_0000001127125106_p1014085831819"></a><a name="zh-cn_topic_0000001127125106_p1014085831819"></a>number</p> 353</td> 354<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125106_p8140458111815"><a name="zh-cn_topic_0000001127125106_p8140458111815"></a><a name="zh-cn_topic_0000001127125106_p8140458111815"></a>水平方向滑动的偏移量，单位px。</p> 355</td> 356</tr> 357<tr id="zh-cn_topic_0000001127125106_row101401584185"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125106_p1314055819184"><a name="zh-cn_topic_0000001127125106_p1314055819184"></a><a name="zh-cn_topic_0000001127125106_p1314055819184"></a>dy</p> 358</td> 359<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125106_p614035881816"><a name="zh-cn_topic_0000001127125106_p614035881816"></a><a name="zh-cn_topic_0000001127125106_p614035881816"></a>number</p> 360</td> 361<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125106_p214075831810"><a name="zh-cn_topic_0000001127125106_p214075831810"></a><a name="zh-cn_topic_0000001127125106_p214075831810"></a>垂直方向滑动的偏移量，单位px。</p> 362</td> 363</tr> 364<tr id="zh-cn_topic_0000001127125106_row1414025811820"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125106_p814014580180"><a name="zh-cn_topic_0000001127125106_p814014580180"></a><a name="zh-cn_topic_0000001127125106_p814014580180"></a>smooth</p> 365</td> 366<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125106_p17140155818186"><a name="zh-cn_topic_0000001127125106_p17140155818186"></a><a name="zh-cn_topic_0000001127125106_p17140155818186"></a>boolean</p> 367</td> 368<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125106_p21401584187"><a name="zh-cn_topic_0000001127125106_p21401584187"></a><a name="zh-cn_topic_0000001127125106_p21401584187"></a>是否平滑处理。</p> 369</td> 370</tr> 371</tbody> 372</table> 373 374## 示例<a name="zh-cn_topic_0000001127125106_section1241545010391"></a> 375 3761. Flex样式 377 378 ``` 379 <!-- xxx.hml --> 380 <div class="container"> 381 <div class="flex-box"> 382 <div class="flex-item color-primary"></div> 383 <div class="flex-item color-warning"></div> 384 <div class="flex-item color-success"></div> 385 </div> 386 </div> 387 ``` 388 389 ``` 390 /* xxx.css */ 391 .container { 392 flex-direction: column; 393 justify-content: center; 394 align-items: center; 395 width: 454px; 396 height: 454px; 397 } 398 .flex-box { 399 justify-content: space-around; 400 align-items: center; 401 width: 400px; 402 height: 140px; 403 background-color: #ffffff; 404 } 405 .flex-item { 406 width: 120px; 407 height: 120px; 408 border-radius: 16px; 409 } 410 .color-primary { 411 background-color: #007dff; 412 } 413 .color-warning { 414 background-color: #ff7500; 415 } 416 .color-success { 417 background-color: #41ba41; 418 } 419 ``` 420 421  422 4232. Flex Wrap样式 424 425 ``` 426 <!-- xxx.hml --> 427 <div class="container"> 428 <div class="flex-box"> 429 <div class="flex-item color-primary"></div> 430 <div class="flex-item color-warning"></div> 431 <div class="flex-item color-success"></div> 432 </div> 433 </div> 434 ``` 435 436 ``` 437 /* xxx.css */ 438 .container { 439 flex-direction: column; 440 justify-content: center; 441 align-items: center; 442 width: 454px; 443 height: 454px; 444 } 445 .flex-box { 446 justify-content: space-around; 447 align-items: center; 448 flex-wrap: wrap; 449 width: 300px; 450 height: 250px; 451 background-color: #ffffff; 452 } 453 .flex-item { 454 width: 120px; 455 height: 120px; 456 border-radius: 16px; 457 } 458 .color-primary { 459 background-color: #007dff; 460 } 461 .color-warning { 462 background-color: #ff7500; 463 } 464 .color-success { 465 background-color: #41ba41; 466 } 467 ``` 468 469  470 4713. Grid样式 472 473 ``` 474 <!-- xxx.hml --> 475 <div class="common grid-parent"> 476 <div class="grid-child grid-left-top"></div> 477 <div class="grid-child grid-left-bottom"></div> 478 <div class="grid-child grid-right-top"></div> 479 <div class="grid-child grid-right-bottom"></div> 480 </div> 481 ``` 482 483 ``` 484 /* xxx.css */ 485 .common { 486 width: 400px; 487 height: 400px; 488 background-color: #ffffff; 489 align-items: center; 490 justify-content: center; 491 margin: 24px; 492 } 493 .grid-parent { 494 display: grid; 495 grid-template-columns: 35% 35%; 496 grid-columns-gap: 24px; 497 grid-rows-gap: 24px; 498 grid-template-rows: 35% 35%; 499 } 500 .grid-child { 501 width: 100%; 502 height: 100%; 503 border-radius: 8px; 504 } 505 .grid-left-top { 506 grid-row-start: 0; 507 grid-column-start: 0; 508 grid-row-end: 0; 509 grid-column-end: 0; 510 background-color: #3f56ea; 511 } 512 .grid-left-bottom { 513 grid-row-start: 1; 514 grid-column-start: 0; 515 grid-row-end: 1; 516 grid-column-end: 0; 517 background-color: #00aaee; 518 } 519 .grid-right-top { 520 grid-row-start: 0; 521 grid-column-start: 1; 522 grid-row-end: 0; 523 grid-column-end: 1; 524 background-color: #00bfc9; 525 } 526 .grid-right-bottom { 527 grid-row-start: 1; 528 grid-column-start: 1; 529 grid-row-end: 1; 530 grid-column-end: 1; 531 background-color: #47cc47; 532 } 533 ``` 534 535  536 537 538
