文档手册

数量 450

添加文章编辑

flex和grid布局

2024-07-07 00:22:56

Sciter 中的布局响应度基于两个简单的概念：

弹性单位 - 0.5* ， 1* ， 2* 或只是 * （等价于 1* ）;
Flow 属性 - 元素内部使用的布局管理器声明;

flow/flexes 是 Sciter 的等价物， display:grid 在 W3C CSS 中是两者 display:flexbox 。

有关比较，请参阅 Flexes 与 Flexbox 备忘单。

Flex 初始化

flex unit（width：1 或只是 width：）几乎可以应用于任何现有的 CSS 属性：

宽度/高度，
边缘
填充物，
边宽，

并且具有非常清晰的物理模型——它是连接到元件特定侧面/部分的线圈的强度。

例子

灵活的利润率

这些规则将以左（0.7）/右（0.3）的比率在容器内水平移动子项：

container {
 display: block;
 width:360px;
 height:170px;
}
child {
 display: block;
 width:120px;
 height:70px;
 margin-left: 0.7*; /* coil of strength 0.7  */
 margin-right: 0.3*; /* coil of strength 0.3  */
}

注意

Flex 单位在将长度和百分比单位应用于内容后分配容器中剩余的可用空间。在这种情况下，固定的子尺寸小于容器的尺寸，我们可以根据相应方向的弯曲分布自由空间。

灵活的尺寸

这些规则将指导孩子完全填满容器的空闲内部区域：

container {
 display: block;
 width:360px;
 height:170px;
}
child {
 display: block;
 width: 1*; /* coil of strength 1  */
 height: 1*; /* coil of strength 1 */
 size:*; /* or simply use this instead of those 2 above */
}

Flexible dimensions

灵活的边距

这些规则将指示儿童以相等的间距散布在容器内：

container {
 display: block;
 width:360px;
 height:170px;
 flow: horizontal; /* children in a row */
 border-spacing: 1*; /* springs between children */
}
child {
 display: block;
 width: 87px; 
}

流

flow 属性定义用于替换容器子级的布局管理器。它接受以下值：

default - 按内容自动发现流程;
horizontal - 单行;
horizontal-wrap - 成排的“砖砌工作”;
vertical - 垂直列，接近浏览器中的默认块流;
vertical-wrap - 柱子中的“砖砌工作”;
stack - 一个孩子在另一个孩子之上，更简单、更快速地替代 position：absolute;
grid() - 明确的网格布局;
row() - 网格布局，但自动填充行;
text - 纯文本布局，如默认 <p> ;

流量：水平

儿童单排替换：

container {
 display: block;
 width:360px;
 height:170px;
 flow: horizontal; /* children in a row */
 padding: 30px;
 border-spacing: 30px; /*distance between children*/
}
child {
 display: block;
 width:*; /* children are of the same width,
              if that is needed */
}

注意

如果已定义，则子项的左边距和右边距的折叠方式与默认块（垂直）布局中的上/下边距相同

提示

定义 child { height:* } 是否希望子项完全填充容器的垂直空间。

提示

vertical-align 并且 horizontal-align 可以在容器上应用以对齐儿童，如果他们不使用弯曲。

流程：水平包装

如果子项不适合放在一排中，则将其替换为多排：

container {
 display: block;
 width:360px;
 height:auto;
 flow: horizontal-wrap; /* children are in rows */
 padding: 30px;
 border-spacing: 30px; /*distance between children*/
}
child {
 display: block;
 width:XXX; /* children have variable width */
}

提示

定义 child { height:* } 是否希望任何子项完全填充行的垂直空间。

提示

可以通过定义 child { clear:after } 或 child { clear:before } 来显式中断行。

流量：垂直

子项在单列中替换：

container {
 display: block;
 width:360px;
 height:auto;
 flow: vertical; /* children in single column */
 padding: 15px;
 border-spacing: 15px; /*distance between children*/
}
child {
 display: block;
 width:*; /* to span whole width of a container if needed */
 height: auto;
}

注意

如果定义，则子项的上边距和下边距正在折叠。

提示

定义 child { height:* } 是否希望某个子项填充容器中剩余的垂直空间。

流程：垂直包装

如果子项不适合放在一排中，则将其替换为多排：

 提示

定义 child { height:* } 是否希望任何子项完全填充列的垂直空间。

提示

定义 child { clear:after | before } 是否要强制分列。

垂直布局有两种不同的子模式，由以下 overflow-x: auto | scroll | scroll-indicator 因素触发：

水平增长

div {
 flow: vertical-wrap;
 overflow-x: scroll-indicator; /* or auto or scroll */
}

在此模式下，列将添加到右侧，并在需要时创建水平滚动条。

垂直增长

div {
 flow: vertical-wrap;
 overflow-y: scroll-indicator; /* or auto or scroll */
}

在此模式下，项目会使列更高，并在需要时创建垂直滚动条。

流程：堆栈

孩子们被替换在一起。

从概念上讲，这种布局模式接近 position:relative / position:absolute “手动”布局，但是：

更轻量级 - 不创建单独的渲染树层;
像任何其他静态布局元素一样进行管理;
允许使用柔性装置进行响应式定位。

container {
 display: block;
 width:*;
 height:*;
 flow: stack; 
 padding: 30px;
}
child:nth-child(1) {
 display: block;
 height:*; /* spans whole height */
 width:60px; 
 margin:0 * 0 20px; 
}

提示

通过定义其 margin s，可以完成精确的子位置和对齐。

提示

可以通过定义儿童的 z 指数来直观地重新排序。

流：grid（）

网格流允许使用“ascii 模板”将元素替换为网格单元。单元格可以跨越多行和多列。

著名的“圣杯”布局：

[HTML全文]

<body>
 <header>...</header>
 <nav>on the left</nav>
 <aside>on the right</aside>
 <footer>...</footer>
 <main>middle</main> 
</body>

CSS的

body {
 flow: grid( 1 1 1,
 2 5 3,
 4 4 4);
}

body > main {
 size:*; /* spans all available space,
             shifting other elements to borders */
}

Grid

此 CSS 声明定义了 3x3 网格，其中元素 1（页眉）和 4（页脚）跨越整行。

模板定义规则

grid 函数接受以 , 逗号分隔的行定义。
每行都包含以空格分隔的元素索引。
如果单元格跨越多行和/或列，则其索引将放置在跨区位置。
单元跨度应构成矩形截面。
空的、未占用的位置可以用 * 标记。

网格像元和间距

display:block 元素跨越整个细胞盒。元素的边距构成单元间空间。
display:inline-block 元素在单元格框内被替换，这些元素的边距定义了该元素与单元格框的间距。

单元间间距定义

在元素上 display:block 由 margin s 和/或
根据 border-spacing 容器的 flow:grid() 属性，无论更大。

流行和流列

flow-rows flow-columns CSS 属性允许显式定义行和列：

flow-rows: <rc-metric> <rc-metric> ...;
flow-columns: <rc-metric> <rc-metric> ...;

每个属性都接受以空格分隔的 \<rc-metric> 定义列表，其中每个 \<rc-metric> 是以下项之一：

长度单位，如 100px ;
柔性单元，如 * ;
min-content 或 max-content 文本;
minmax（min，max）函数，例如 minmax(100px,200px)
repeat（N，\）函数，例如 repeat(3,300px)

流：row（）

row（）流是 grid（）流的变体，仅在网格内容定义方法上有所不同。

flow: row(<col-content>,<col-content>, ...<col-content>);

该行的参数是逗号分隔的 \ 定义列表<col-content>，用于定义将进入该列的元素。

每个 \<col-content> 又是属于该列的元素的 HTML 标记的空格分隔列表：

[HTML全文]

<form>
 <label>first name</label> 
 <input|text(first-name) />
 <label>second name</label> 
 <input|text(second-name) />
 <label>gender</label> 
 <select(gender)>
 <option>male</option>
 <option>female</option>
 </select>
</form>

CSS的

form {
 /* first column - only <label>
     second column - either <input> or <select>*/
 flow:row(label, input select); 
 flow-columns: max-content *;
}

提示

未在行模板中列出的元素被视为整行元素 - 它跨越所有列。