角材料-布局 - 芒果文档

📌 相关文章

📜 角材料-布局

📅 最后修改于: 2020-10-28 04:58:14 🧑 作者: Mango

布局指令

容器元素上的Layout指令用于为其子元素指定布局方向。以下是布局指令的可分配值-

行-物品水平排列，最大高度= 100％，最大宽度是容器中物品的宽度。
柱-物品与最大宽度= 100％和最大高度垂直布置是在容器中的物品的高度。

为了使响应式设计（例如根据设备屏幕尺寸自动更改布局），可以使用下表中列出的布局API来设置具有视图宽度的设备的布局方向。

Sr.No	API & Device width when breakpoint overrides default
1	layout Sets default layout direction unless overridden by another breakpoint.
2	layout-xs width < 600px
3	layout-gt-xs width >= 600px
4	layout-sm 600px <= width < 960px
5	layout-gt-sm width >= 960px
6	layout-md 960px <= width < 1280px
7	layout-gt-md width >= 1280px
8	layout-lg 1280px <= width < 1920px
9	layout-gt-lg width >= 1920px
10	layout-xl width >= 1920px

例

以下示例显示了布局指令的使用以及布局的使用。

am_layouts.htm

现场演示


      
      
      
      
      
      
      
      
            
   
   
    
      
         
            Row 1: Item 1
            Row 1: Item 2
         
         
         
            Column 1: item 1
            Column 1: item 2

结果

验证结果。

弹性指令

容器元素上的flex指令用于自定义元素的大小和位置。它定义了元素如何相对于其父容器和容器中的其他元素调整大小的方式。以下是flex伪指令的可分配值-

5 − 5、10、15 … 100的倍数
33 – 33％
66 − 66％

例

以下示例显示了flex伪指令的使用以及flex的用法。

am_flex.htm

现场演示


      
      
      
      
      
      
      
      
      
            
   
   
    
      
         
            [flex = "30"]
         
         
         
            [flex = "45"]
         
         
         
            [flex = "25"]
         
         
         
            [flex = "33"]
         
         
         
            [flex = "66"]
         
         
         
            [flex = "50"]
         
         
         
            [flex]

结果

验证结果。