Grid Layout Group

网格布局组组件将其子布局元素放置在网格中。

Padding:(填充)

布局组边缘内的填充。与其他布局组不同,“网格布局组”将忽略其所包含布局元素的最小,首选和灵活大小属性,而是为所有这些元素分配固定大小,这些大小由“网格布局组”自身的“单元格大小”属性定义。

Cell Size:(格子大小)

组中每个布局元素要使用的大小。

Spacing:(间隔)

布局元素之间的间距。

Start Corner:(起始角)

第一个元素所在的角。

Start Axis:(起始轴)

沿着哪个主轴放置元素。在开始新行之前,水平将填满整个行。在开始新列之前,Vertical将填充整个列。

Child Alignment:(子对齐)

如果布局元素未填满所有可用空间,则用于这些元素的对齐方式。

Constraint:(约束)

将网格限制为固定数量的行或列,以辅助自动布局系统。

与其他布局组不同,“网格布局组”将忽略其所包含布局元素的最小,首选和灵活大小属性,而是为所有这些元素分配固定大小,这些大小由“网格布局组”自身的“单元格大小”属性定义。

网格布局组和自动布局

使用网格布局组作为自动布局设置的一部分时,需要特别注意一些注意事项,例如将其与Content Size Fitter一起使用。

自动布局系统独立计算水平和垂直尺寸。这可能与“网格布局组”不同,后者的行数取决于列数,反之亦然。

对于任何给定数量的单元格,行计数和列计数都有不同的组合,可以使网格适合其内容。为了辅助布局系统,可以使用Constraint属性指定要使表具有固定数量的列或行。

以下是将布局系统与内容大小限制器一起使用的建议方法:

宽度和高度固定

要设置具有灵活宽度和固定高度的网格,该网格在添加更多元素时会水平扩展,您可以如下设置这些属性:

  • 网格布局组约束:固定行数
  • 内容大小适合水平放置:首选大小
  • 内容大小适合垂直匹配:首选大小或不受限制

如果使用不受约束的垂直拟合,则由您决定网格的高度足以适合指定的单元格行数。

固定宽度和高度灵活

要设置具有固定宽度和灵活高度的网格,该网格在添加更多元素时会垂直扩展,您可以如下设置这些属性:

  • 网格布局组约束:固定列数
  • 内容尺寸适合水平放置:首选尺寸或不受限制
  • 内容大小钳工垂直适合:首选大小

如果使用无约束的水平拟合,则由您决定网格的宽度是否足以容纳指定的单元格列数。

灵活的宽度和高度

如果您想要一个既具有宽度又具有高度的网格,则可以这样做,但是您将无法控制特定的行数和列数。网格将尝试使行数和列数大致相同。您可以如下设置这些属性:

  • 网格布局组约束:灵活
  • 内容大小适合水平放置:首选大小
  • 内容大小钳工垂直适合:首选大小

css高度自动填满_Unity--自动版面(Grid Layout Group)相关推荐

  1. 一个div分上下两部分,上部分高度不固定,下面部分自动填满剩余高度

    div自动填满剩余高度 html <div class="wrapper" style="height:800px;"><div class= ...

  2. [WP8] ListBox的Item宽度自动填满

    [WP8] ListBox的Item宽度自动填满 范例下载 范例程序代码:点此下载 问题情景 开发WP8应用程序的时候,常常会需要使用ListBox作为容器来呈现各种数据集合.但是在ListBox呈现 ...

  3. Ext.grid.ColumnModel列宽度自动填满grid宽度

    var grid = new Ext.grid.GridPanel({       renderTo : Ext.getBody(),       ds : store,       cm : cm, ...

  4. 如何用纯CSS将图片填满div,自适应容器大小

    如何用纯CSS将图片填满div,自适应容器大小  2016-10-11 13:33   网页设计   标签:css 代码   5987    3 我有一个模板,想按常规做一个div里面放置一个img图 ...

  5. css自动填满父级剩余宽度

    1.父元素内有两个子元素,其中一个元素宽度已知,另一个元素填满父级剩余宽度,这种情况可以用 calc() 来实现. <html><head><meta charset=& ...

  6. CSS —— 背景图片填满DIV、鼠标滑过放大图片

    1.让背景图片填满DIV 应用background-size属性可以设置背景图片填满整个div,background-size取值及解释如下: (1)background-size:cover MDN ...

  7. DIV自动填满剩余空间

    参考:http://bbs.blueidea.com/thread-2773197-1-1.html 效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DT ...

  8. CSS实现div填满剩余高度

    需求: nav和content盒子的高度和浏览器高度相同,且不能出现纵向滚动条 绿色盒子高度固定,比如:50px 紫色盒子填充剩余的高度 BODY部分的代码: 方式一:绝对定位 方式二:box-siz ...

  9. 如何让图片跟随div大小自动填满

    1.图片与div的width和height一致(一般不同),手动调整div或图片的width和height 2.div的属性设置: background:url("背景图片路径") ...

最新文章

  1. Java:多线程之线程池
  2. $_SERVER['SCRIPT_FILENAME'] 与 __FILE__ 区别
  3. linux snmp设置报警次数,CentOS/RHEL 6下禁止重复的SNMP连接日志
  4. boost::signals2::deconstruct相关的测试程序
  5. 基于roslyn的动态编译库Natasha
  6. ccpc河北大学生程序设计竞赛dp小总结
  7. ASP获取数据库表名,字段名以及对字段的一些操作
  8. [UE4]函数和事件的区别
  9. java list打乱排序_JAVA Collections.shuffle打乱列表
  10. tarjan求桥、割顶
  11. 软件测试基础知识【纯知识分享】
  12. 洛伦兹吸引子 matlab,混沌蝴蝶——洛伦兹吸引子
  13. 被谢耳朵一直嘲笑的MIT,这次发明了黑镜中的“恐怖机器”
  14. 生死看淡,不服就干,小米终于迎来了久违的大幅反弹
  15. iOS应用的游戏中心和排行榜
  16. 估值近百亿,“创维三把手”酷开科技能否顺利赶考?
  17. gif录制软件:ScreenToGif
  18. 互联网-2互联网思维特点和理念
  19. 虚幻4实战 贪吃蛇制作
  20. 对未来计算机网络的展望作文300,2017年关于网络的300字作文篇我与网络

热门文章

  1. 我的测试生活感悟2 - Art Of Unit Testing
  2. linux下mysql的启动与停止
  3. OJ1089: 阶乘的最高位(C语言)
  4. 信息学奥赛一本通(2024:【例4.10】末两位数)
  5. Playing with Permutations(CF-252D)
  6. 图论 —— 2-SAT 问题
  7. 求排列的逆序数(信息学奥赛一本通-T1237)
  8. 信息学奥赛C++语言: 跑步
  9. 32 SD配置-合作伙伴确认-设置客户主数据的合作伙伴确定
  10. 16 PP配置-生产计划-主数据-定义MRP区域