布局容器
布局和容器
使用容器元素上的layout
指令来为其子元素指定布局方向:水平排列(layout="row"
)或垂直排列(layout="column"
)。
请注意,如果指定的
layout
指令没有值,那么row
是默认的布局方向。
row
: 水平排列的项目。max-height = 100%
和max-width
是容器中项目的宽度。column
: 垂直排列的项目。max-width = 100%
和max-height
是容器中项目的高度。
<!-- 水平布局 --> <div layout="row"> <div flex>First item in row</div> <div flex>Second item in row</div> </div> <!-- 垂直布局 --> <div layout="column"> <div flex>First item in column</div> <div flex>Second item in column</div> </div>
请注意,
layout
仅影响该容器的直接子元素的流向。
布局和响应断点
如布局简介中所介绍的,您可以使用断点 别名后缀 根据设备视图大小更改布局。
要使布局根据设备屏幕大小自动更改,请使用以下layout
API之一为具有视图宽度的设备设置布局方向:
layout API@H_502_68@ | flex API@H_502_68@ | 激活设备时@H_502_68@ |
---|---|---|
layout | flex | 设置默认布局方向,除非被另一个断点覆盖。 |
layout-xs | flex-xs | width < 600px |
layout-gt-xs | flex-gt-xs | width >= 600px |
layout-sm | flex-sm | 600px <= width < 960px |
layout-gt-sm | flex-gt-sm | width >= 960px |
layout-md | flex-md | 960px <= width < 1280px |
layout-gt-md | flex-gt-md | width >= 1280px |
layout-lg | flex-lg | 1280px <= width < 1920px |
layout-gt-lg | flex-gt-lg | width >= 1920/b>px |
layout-xl | flex-xl | width >= 1920px |
对于下面的代码,当缩小浏览器窗口宽度时,注意流动方向更改为移动设备(xs
)的column
。 当您展开时,它将重置为gt-sm
视图大小的row
。
<div layout="row" layout-xs="column"> <div flex> I'm above on mobile,and to the left on larger devices. </div> <div flex> I'm below on mobile,and to the right on larger devices. </div> </div>
有关更多选项(如填充,对齐等),请参阅“布局参数”章节。