Zonen

Zonen

Der Arbeitsbereich mit zwei Fenstern, auf dem jeder Explorer, Editor und Detailansicht basiert. Eine Zone hat keine eigene Breite und Höhe: Die Teilung, in der sie sich befindet, bestimmt ihre Größe, und jede Seite scrollt für sich allein. Zwei Zonen sind zwei Objekte, die auf der Seite liegen, nicht ein Panel, das in zwei Hälften geschnitten ist — was sie unterscheidet, ist der Raum zwischen ihnen, und `zone--panel` ist der Grund, auf dem jede steht.

Eine Teilung

Eine Spalte hat eine feste Größe, die andere nimmt den Rest ein. Die Größe wird durch einen Schritt festgelegt und ist die eigene der Zone — sie wird von nichts, was darin verschachtelt ist, geerbt.
zone--narrow zone--size-6
zone

Diese Seite nimmt alles auf, was die feste Spalte übrig lässt.

Jede Seite scrollt für sich allein

Eine scrollbare Zone hält den Überlauf, nicht die Seite. Wenn eine von diesen beiden gescrollt wird, bleibt die andere an ihrem Platz, was der ganze Grund für die Form ist.

Element 1

Element 2

Element 3

Element 4

Element 5

Element 6

Element 7

Element 8

Element 9

Element 10

Element 11

Element 12

Element 13

Element 14

Element 15

Element 16

Element 17

Element 18

Element 19

Element 20

Element 21

Element 22

Element 23

Element 24

Element 25

Element 26

Element 27

Element 28

Element 29

Element 30

Zeile 1

Zeile 2

Zeile 3

Zeile 4

Zeile 5

Zeile 6

Zeile 7

Zeile 8

Zeile 9

Zeile 10

Zeile 11

Zeile 12

Zeile 13

Zeile 14

Zeile 15

Zeile 16

Zeile 17

Zeile 18

Zeile 19

Zeile 20

Zeile 21

Zeile 22

Zeile 23

Zeile 24

Zeile 25

Zeile 26

Zeile 27

Zeile 28

Zeile 29

Zeile 30

Ein Kopfbereich, der nicht scrollt

Eine vertikal geteilte Ansicht: Eine schmale Zone hat die Höhe dessen, was sie hält, der Körper nimmt den Rest ein und scrollt darunter. Dies ist die Anordnung eines Panels mit einer Werkzeugleiste oben.
zone--narrow

Zeile 1

Zeile 2

Zeile 3

Zeile 4

Zeile 5

Zeile 6

Zeile 7

Zeile 8

Zeile 9

Zeile 10

Zeile 11

Zeile 12

Zeile 13

Zeile 14

Zeile 15

Zeile 16

Zeile 17

Zeile 18

Zeile 19

Zeile 20

Zeile 21

Zeile 22

Zeile 23

Zeile 24

Zeile 25

Zeile 26

Zeile 27

Zeile 28

Zeile 29

Zeile 30

Unter dem Minimum

Bei einem Fußboden beansprucht die flexible Zone eine volle Zeile und die feste Spalte bewegt sich darüber, anstatt beide auf nichts zusammengedrückt zu werden. Verkleinern Sie das Fenster, um zu sehen, wie es sich zusammenfaltet.
zone--narrow
zone

Unter dem Fußboden, der dieser Zone gegeben ist, nimmt sie eine eigene Zeile ein.

So breit wie der Inhalt

`zone--fit-content`: der Bereich nimmt die Breite dessen ein, was er enthält — eine Tabelle mit vielen Spalten — anstatt was ihm verbleibt. Die Zeile überläuft und scrollt seitlich als Einheit, ihr Scrollbalken am Fuß des Rahmens, nicht nur unter der Tabelle; jeder Bereich scrollt weiterhin für sich selbst nach unten.

Element 1

Element 2

Element 3

Element 4

Element 5

Element 6

Element 7

Element 8

Element 9

Element 10

Element 11

Element 12

Element 13

Element 14

Element 15

Element 16

Element 17

Element 18

Element 19

Element 20

Element 21

Element 22

Element 23

Element 24

Element 25

Element 26

Element 27

Element 28

Element 29

Element 30

zone--fit-content
Spalte 1Spalte 2Spalte 3Spalte 4Spalte 5Spalte 6Spalte 7Spalte 8Spalte 9Spalte 10
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg
12.5 kg 25 kg 37.5 kg 50 kg 62.5 kg 75 kg 87.5 kg 100 kg 112.5 kg 125 kg

Neben einer Seite

`zone--portrait`: nie schmaler als eine Hochformatseite (3:4) in der Höhe der Zeile. Von Hand verbreitert, behält der Text seine Breite und die Zeile scrollt seitlich, statt die Seite zu quetschen.
zone--measure (--zone-size: 48rem)

Element 1

Element 2

Element 3

Element 4

Element 5

Element 6

Element 7

Element 8

Element 9

Element 10

Element 11

Element 12

v1.0.29