Layout capability 03

经典布局原语

22 个低输入、确定性、内在响应的稳定布局模式。

Stack / Cluster / Repel

Stack
Block 1
Block 2
Block 3
Clusterwraplogical
Repel title

Center / Bleed

正文保持可读宽度。

Bleed 突破正文宽度

之后回到阅读宽度。

Sidebar / Switcher

Content 自身决定何时换行
One
Two
Three

Cover / Reel

Header
始终位于剩余空间中央
Footer
Reel 1
Reel 2
Reel 3
Reel 4
Reel 5
Reel 6

Frame / Aspect Ratio / Media Object

Frame 21:9 + crop contract
Aspect Ratio 16:9
AI
Media Object

媒体、正文与末端操作使用逻辑方向。

AI
RTL Media Object

Auto Fit / Auto Fill

Fit
Fit
Fit
Fill
Fill
Fill

Imposter / Overlay

Imposter

不依赖未知尺寸的精确居中。

Overlay annotation

Masonry / Bento

A
B
C
D
E
F
Featured
Tall
Tile
Tile
Wide

Scroll Area / Scroll Snap / Sticky Region

Sticky Region

Scrollable block 1

Scrollable block 2

Scrollable block 3

Scrollable block 4

Snap 1
Snap 2
Snap 3

Safe Area / Container Query

四边安全区 + 应用间距
34rem：单列
Tile
50rem：Bento
Tile