Zones

Zones

De werkruimte met twee panelen waarop elke verkenner, editor en detailweergave is gebouwd. Een zone heeft geen eigen breedte en hoogte: de split waarin het zich bevindt bepaalt de grootte, en elke kant scrollt afzonderlijk. Twee zones zijn twee objecten op de pagina, geen paneel dat in tweeën is gesneden — wat ze onderscheidt is de ruimte ertussen, en `zone--panel` is de grond waarop elk staat.

Een split

De ene kolom is van een bepaalde grootte, de andere neemt de rest in. De grootte wordt gegeven door een stap, en het is de eigen grootte van de zone — het wordt niet geërfd door iets wat erin genest is.
zone--narrow zone--size-6
zone

Deze kant neemt wat de gekleurde kolom laat liggen.

Elke kant scrollt afzonderlijk

Een scrollbare zone houdt de overflow vast, niet de pagina. Scroll één van deze twee en de andere blijft staan waar hij is, wat de hele reden is voor de vorm.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

Lijn 1

Lijn 2

Lijn 3

Lijn 4

Lijn 5

Lijn 6

Lijn 7

Lijn 8

Lijn 9

Lijn 10

Lijn 11

Lijn 12

Lijn 13

Lijn 14

Lijn 15

Lijn 16

Lijn 17

Lijn 18

Lijn 19

Lijn 20

Lijn 21

Lijn 22

Lijn 23

Lijn 24

Lijn 25

Lijn 26

Lijn 27

Lijn 28

Lijn 29

Lijn 30

Een koptekst die niet scrollt

Een split die verticaal is: een smalle zone heeft de hoogte van wat hij bevat, het lichaam neemt de rest en scrollt eronder. Dit is de opstelling van een paneel met een werkbalk bovenaan.
zone--narrow

Lijn 1

Lijn 2

Lijn 3

Lijn 4

Lijn 5

Lijn 6

Lijn 7

Lijn 8

Lijn 9

Lijn 10

Lijn 11

Lijn 12

Lijn 13

Lijn 14

Lijn 15

Lijn 16

Lijn 17

Lijn 18

Lijn 19

Lijn 20

Lijn 21

Lijn 22

Lijn 23

Lijn 24

Lijn 25

Lijn 26

Lijn 27

Lijn 28

Lijn 29

Lijn 30

Onder het minimum

Gegeven een vloer, neemt de flexibele zone een volle regel in beslag en beweegt de gekleurde kolom erboven in plaats van dat beide worden samengedrukt tot niets. Vernauw het venster om het in te zien vouwen.
zone--narrow
zone

Onder de vloer die deze zone heeft, neemt het een eigen regel in.

Zo breed als de inhoud

`zone--fit-content`: de regio neemt de breedte aan van wat het bevat — een tabel met meerdere kolommen — in plaats van wat er nog over is. De rij stroomt over en scrolt zijwaarts als één geheel, met de schuifbalk aan de onderkant van het frame, niet alleen onder de tabel; elke regio scrolt nog steeds afzonderlijk naar beneden.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Item 21

Item 22

Item 23

Item 24

Item 25

Item 26

Item 27

Item 28

Item 29

Item 30

zone--fit-content
Kolom 1Kolom 2Kolom 3Kolom 4Kolom 5Kolom 6Kolom 7Kolom 8Kolom 9Kolom 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

Naast een pagina

`zone--portrait`: nooit smaller dan een staande pagina (3:4) zo hoog als de rij. Met de hand verbreed houdt de tekst zijn breedte en scrolt de rij zijwaarts in plaats van de pagina te pletten.
zone--measure (--zone-size: 48rem)

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

v1.0.29