Zones

Zones

L'espace de travail à deux volets sur lequel chaque explorateur, éditeur et vue détaillée est construit. Une zone n'a pas de largeur ni de hauteur propre : c'est la division dans laquelle elle se trouve qui la dimensionne, et chaque côté défile indépendamment. Deux zones sont deux objets posés sur la page, pas un panneau coupé en deux — ce qui les distingue, c'est l'espace entre elles, et `zone--panel` est le sol sur lequel chacune se tient.

Une division

Une colonne de taille, l'autre prenant ce qui reste. La taille est donnée par un pas, et c'est celle de la zone — elle n'est pas héritée de quoi que ce soit de nesté à l'intérieur.
zone--narrow zone--size-6
zone

Ce côté prend tout ce que laisse la colonne dimensionnée.

Chaque côté défile indépendamment

Une zone défilante est ce qui contient le débordement, pas la page. Défilez l'une de ces deux zones et l'autre reste là où elle est, ce qui est toute la raison de cette forme.

Élément 1

Élément 2

Élément 3

Élément 4

Élément 5

Élément 6

Élément 7

Élément 8

Élément 9

Élément 10

Élément 11

Élément 12

Élément 13

Élément 14

Élément 15

Élément 16

Élément 17

Élément 18

Élément 19

Élément 20

Élément 21

Élément 22

Élément 23

Élément 24

Élément 25

Élément 26

Élément 27

Élément 28

Élément 29

Élément 30

Ligne 1

Ligne 2

Ligne 3

Ligne 4

Ligne 5

Ligne 6

Ligne 7

Ligne 8

Ligne 9

Ligne 10

Ligne 11

Ligne 12

Ligne 13

Ligne 14

Ligne 15

Ligne 16

Ligne 17

Ligne 18

Ligne 19

Ligne 20

Ligne 21

Ligne 22

Ligne 23

Ligne 24

Ligne 25

Ligne 26

Ligne 27

Ligne 28

Ligne 29

Ligne 30

Un en-tête qui ne défile pas

Une division tournée verticalement : une zone étroite est de la hauteur de ce qu'elle contient, le corps prend le reste et défile en dessous. C'est l'arrangement d'un panneau avec une barre d'outils en haut.
zone--narrow

Ligne 1

Ligne 2

Ligne 3

Ligne 4

Ligne 5

Ligne 6

Ligne 7

Ligne 8

Ligne 9

Ligne 10

Ligne 11

Ligne 12

Ligne 13

Ligne 14

Ligne 15

Ligne 16

Ligne 17

Ligne 18

Ligne 19

Ligne 20

Ligne 21

Ligne 22

Ligne 23

Ligne 24

Ligne 25

Ligne 26

Ligne 27

Ligne 28

Ligne 29

Ligne 30

Sous le minimum

Étant donné un sol, la zone flexible s'approprie une ligne complète et la colonne dimensionnée se déplace au-dessus au lieu d'être toutes deux compressées à rien. Réduisez la fenêtre pour voir comment cela se replie.
zone--narrow
zone

Sous le sol qui est donné à cette zone, elle prend une ligne qui lui est propre.

Aussi large que son contenu

`zone--fit-content` : la zone prend la largeur de ce qu'elle contient — un tableau avec de nombreuses colonnes — plutôt que celle qui lui est laissée. La ligne déborde et défile horizontalement en une seule fois, sa barre de défilement en bas du cadre, et non sous le tableau seul ; chaque zone défile toujours vers le bas individuellement.

Élément 1

Élément 2

Élément 3

Élément 4

Élément 5

Élément 6

Élément 7

Élément 8

Élément 9

Élément 10

Élément 11

Élément 12

Élément 13

Élément 14

Élément 15

Élément 16

Élément 17

Élément 18

Élément 19

Élément 20

Élément 21

Élément 22

Élément 23

Élément 24

Élément 25

Élément 26

Élément 27

Élément 28

Élément 29

Élément 30

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

À côté d’une page

`zone--portrait` : jamais plus étroite qu’une page portrait (3:4) aussi haute que la rangée. Élargi à la main, le texte garde sa largeur et la rangée défile de côté au lieu d’écraser la page.
zone--measure (--zone-size: 48rem)

Élément 1

Élément 2

Élément 3

Élément 4

Élément 5

Élément 6

Élément 7

Élément 8

Élément 9

Élément 10

Élément 11

Élément 12

v1.0.29