1# 原子布局<a name="ZH-CN_TOPIC_0000001209252159"></a> 2 3在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。设计师可以考虑使用原子能力，定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力，快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。 4 5> **说明：** 6>从API Version 5 开始支持。 7 8## 隐藏能力<a name="zh-cn_topic_0000001127125020_section0441154013284"></a> 9 10在非折行flex布局基础上，增加了显示优先级标记，可以调整组件内元素水平/垂直方向的显示优先级，根据当前组件容器的可用空间来显示内容。 11 12<a name="zh-cn_topic_0000001127125020_table14323142291413"></a> 13<table><thead align="left"><tr id="zh-cn_topic_0000001127125020_row232317223144"><th class="cellrowborder" valign="top" width="15.65%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001127125020_p85051811127"><a name="zh-cn_topic_0000001127125020_p85051811127"></a><a name="zh-cn_topic_0000001127125020_p85051811127"></a>样式</p> 14</th> 15<th class="cellrowborder" valign="top" width="13.270000000000001%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001127125020_p2505915217"><a name="zh-cn_topic_0000001127125020_p2505915217"></a><a name="zh-cn_topic_0000001127125020_p2505915217"></a>类型</p> 16</th> 17<th class="cellrowborder" valign="top" width="11.58%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001127125020_p8654516123719"><a name="zh-cn_topic_0000001127125020_p8654516123719"></a><a name="zh-cn_topic_0000001127125020_p8654516123719"></a>默认值</p> 18</th> 19<th class="cellrowborder" valign="top" width="59.5%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001127125020_p75054112213"><a name="zh-cn_topic_0000001127125020_p75054112213"></a><a name="zh-cn_topic_0000001127125020_p75054112213"></a>说明</p> 20</th> 21</tr> 22</thead> 23<tbody><tr id="zh-cn_topic_0000001127125020_row23236222143"><td class="cellrowborder" valign="top" width="15.65%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125020_p1950519112213"><a name="zh-cn_topic_0000001127125020_p1950519112213"></a><a name="zh-cn_topic_0000001127125020_p1950519112213"></a>display-index</p> 24</td> 25<td class="cellrowborder" valign="top" width="13.270000000000001%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125020_p65059111213"><a name="zh-cn_topic_0000001127125020_p65059111213"></a><a name="zh-cn_topic_0000001127125020_p65059111213"></a>number</p> 26</td> 27<td class="cellrowborder" valign="top" width="11.58%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125020_p166547162374"><a name="zh-cn_topic_0000001127125020_p166547162374"></a><a name="zh-cn_topic_0000001127125020_p166547162374"></a>0</p> 28</td> 29<td class="cellrowborder" valign="top" width="59.5%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125020_p3505181129"><a name="zh-cn_topic_0000001127125020_p3505181129"></a><a name="zh-cn_topic_0000001127125020_p3505181129"></a>适用于div等支持flex布局的容器组件中的子组件上，当容器组件在flex主轴上尺寸不足以显示全部内容时，按照display-index值从小到大的顺序进行隐藏，具有相同display-index值的组件同时隐藏，默认值为0，表示隐藏。</p> 30</td> 31</tr> 32</tbody> 33</table> 34 35## 占比能力<a name="zh-cn_topic_0000001127125020_section13725752194418"></a> 36 37在非折行的flex布局中，定义了占比能力的组件，保证指定元素始终在容器的某一个比例空间中进行布局。 38 39<a name="zh-cn_topic_0000001127125020_table337121117522"></a> 40<table><thead align="left"><tr id="zh-cn_topic_0000001127125020_row9371811155218"><th class="cellrowborder" valign="top" width="15.65%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001127125020_p173711311175216"><a name="zh-cn_topic_0000001127125020_p173711311175216"></a><a name="zh-cn_topic_0000001127125020_p173711311175216"></a>样式</p> 41</th> 42<th class="cellrowborder" valign="top" width="13.270000000000001%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001127125020_p6371111119529"><a name="zh-cn_topic_0000001127125020_p6371111119529"></a><a name="zh-cn_topic_0000001127125020_p6371111119529"></a>类型</p> 43</th> 44<th class="cellrowborder" valign="top" width="11.58%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001127125020_p337181145211"><a name="zh-cn_topic_0000001127125020_p337181145211"></a><a name="zh-cn_topic_0000001127125020_p337181145211"></a>默认值</p> 45</th> 46<th class="cellrowborder" valign="top" width="59.5%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001127125020_p33711211145213"><a name="zh-cn_topic_0000001127125020_p33711211145213"></a><a name="zh-cn_topic_0000001127125020_p33711211145213"></a>说明</p> 47</th> 48</tr> 49</thead> 50<tbody><tr id="zh-cn_topic_0000001127125020_row1237118111527"><td class="cellrowborder" valign="top" width="15.65%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125020_p17371711195218"><a name="zh-cn_topic_0000001127125020_p17371711195218"></a><a name="zh-cn_topic_0000001127125020_p17371711195218"></a>flex-weight</p> 51</td> 52<td class="cellrowborder" valign="top" width="13.270000000000001%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125020_p737191112523"><a name="zh-cn_topic_0000001127125020_p737191112523"></a><a name="zh-cn_topic_0000001127125020_p737191112523"></a>number</p> 53</td> 54<td class="cellrowborder" valign="top" width="11.58%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125020_p83711511205218"><a name="zh-cn_topic_0000001127125020_p83711511205218"></a><a name="zh-cn_topic_0000001127125020_p83711511205218"></a>-</p> 55</td> 56<td class="cellrowborder" valign="top" width="59.5%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125020_p337111112521"><a name="zh-cn_topic_0000001127125020_p337111112521"></a><a name="zh-cn_topic_0000001127125020_p337111112521"></a>指明当前元素在flex主轴方向上尺寸权值，当且仅当容器组件中所有节点均设置此属性时生效，当前元素尺寸为： 容器主轴尺寸 * 当前权值 / 所有子元素权值和。</p> 57</td> 58</tr> 59</tbody> 60</table> 61 62## 固定比例<a name="zh-cn_topic_0000001127125020_section922215811557"></a> 63 64定义了组件固定比例调整尺寸的能力。 65 66<a name="zh-cn_topic_0000001127125020_table1077611191734"></a> 67<table><thead align="left"><tr id="zh-cn_topic_0000001127125020_row377618191536"><th class="cellrowborder" valign="top" width="15.65%" id="mcps1.1.5.1.1"><p id="zh-cn_topic_0000001127125020_p1776101916316"><a name="zh-cn_topic_0000001127125020_p1776101916316"></a><a name="zh-cn_topic_0000001127125020_p1776101916316"></a>样式</p> 68</th> 69<th class="cellrowborder" valign="top" width="13.270000000000001%" id="mcps1.1.5.1.2"><p id="zh-cn_topic_0000001127125020_p277618191233"><a name="zh-cn_topic_0000001127125020_p277618191233"></a><a name="zh-cn_topic_0000001127125020_p277618191233"></a>类型</p> 70</th> 71<th class="cellrowborder" valign="top" width="11.58%" id="mcps1.1.5.1.3"><p id="zh-cn_topic_0000001127125020_p57762194318"><a name="zh-cn_topic_0000001127125020_p57762194318"></a><a name="zh-cn_topic_0000001127125020_p57762194318"></a>默认值</p> 72</th> 73<th class="cellrowborder" valign="top" width="59.5%" id="mcps1.1.5.1.4"><p id="zh-cn_topic_0000001127125020_p2776151915313"><a name="zh-cn_topic_0000001127125020_p2776151915313"></a><a name="zh-cn_topic_0000001127125020_p2776151915313"></a>说明</p> 74</th> 75</tr> 76</thead> 77<tbody><tr id="zh-cn_topic_0000001127125020_row67761119233"><td class="cellrowborder" valign="top" width="15.65%" headers="mcps1.1.5.1.1 "><p id="zh-cn_topic_0000001127125020_p10776181914317"><a name="zh-cn_topic_0000001127125020_p10776181914317"></a><a name="zh-cn_topic_0000001127125020_p10776181914317"></a>aspect-ratio</p> 78</td> 79<td class="cellrowborder" valign="top" width="13.270000000000001%" headers="mcps1.1.5.1.2 "><p id="zh-cn_topic_0000001127125020_p57762019636"><a name="zh-cn_topic_0000001127125020_p57762019636"></a><a name="zh-cn_topic_0000001127125020_p57762019636"></a>number</p> 80</td> 81<td class="cellrowborder" valign="top" width="11.58%" headers="mcps1.1.5.1.3 "><p id="zh-cn_topic_0000001127125020_p1777613191935"><a name="zh-cn_topic_0000001127125020_p1777613191935"></a><a name="zh-cn_topic_0000001127125020_p1777613191935"></a>-</p> 82</td> 83<td class="cellrowborder" valign="top" width="59.5%" headers="mcps1.1.5.1.4 "><p id="zh-cn_topic_0000001127125020_p12776121918313"><a name="zh-cn_topic_0000001127125020_p12776121918313"></a><a name="zh-cn_topic_0000001127125020_p12776121918313"></a>1. 接受任意大于0的浮点值，定义为该节点的宽度与高度比，设置该属性后，该元素尺寸宽高比按照此属性值进行调整。</p> 84<p id="zh-cn_topic_0000001127125020_p3793145491117"><a name="zh-cn_topic_0000001127125020_p3793145491117"></a><a name="zh-cn_topic_0000001127125020_p3793145491117"></a>2. 遵守最大值与最小值的限制。</p> 85<p id="zh-cn_topic_0000001127125020_p15216164731415"><a name="zh-cn_topic_0000001127125020_p15216164731415"></a><a name="zh-cn_topic_0000001127125020_p15216164731415"></a>3. 在flex布局中，主轴尺寸先进行调整，后根据该尺寸调整交叉轴。</p> 86</td> 87</tr> 88</tbody> 89</table> 90 91
