Zonas

Zonas

El espacio de trabajo de dos paneles en el que se basa cada explorador, editor y vista de detalles. Una zona no tiene ancho ni alto propios: el espacio dividido en el que se encuentra es lo que le da tamaño, y cada lado se desplaza por separado. Dos zonas son dos objetos dispuestos en la página, no un panel cortado por la mitad; lo que las distingue es el espacio entre ellas, y `zone--panel` es el suelo sobre el que se sostiene cada una.

Una división

Una columna con tamaño, la otra tomando lo que queda. El tamaño se determina por un paso, y es propio de la zona; no es heredado de nada anidado dentro de ella.
zone--narrow zone--size-6
zone

Este lado toma lo que la columna dimensionada deja.

Cada lado se desplaza por separado

Una zona desplazable es la que contiene el desbordamiento, no la página. Desplaza uno de estos dos y el otro se queda donde está, que es toda la razón de la forma.

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Elemento 5

Elemento 6

Elemento 7

Elemento 8

Elemento 9

Elemento 10

Elemento 11

Elemento 12

Elemento 13

Elemento 14

Elemento 15

Elemento 16

Elemento 17

Elemento 18

Elemento 19

Elemento 20

Elemento 21

Elemento 22

Elemento 23

Elemento 24

Elemento 25

Elemento 26

Elemento 27

Elemento 28

Elemento 29

Elemento 30

Línea 1

Línea 2

Línea 3

Línea 4

Línea 5

Línea 6

Línea 7

Línea 8

Línea 9

Línea 10

Línea 11

Línea 12

Línea 13

Línea 14

Línea 15

Línea 16

Línea 17

Línea 18

Línea 19

Línea 20

Línea 21

Línea 22

Línea 23

Línea 24

Línea 25

Línea 26

Línea 27

Línea 28

Línea 29

Línea 30

Un encabezado que no se desplaza

Una división convertida en vertical: una zona estrecha tiene la altura de lo que contiene, el cuerpo toma el resto y se desplaza por debajo. Esta es la disposición de un panel con una barra de herramientas en la parte superior.
zone--narrow

Línea 1

Línea 2

Línea 3

Línea 4

Línea 5

Línea 6

Línea 7

Línea 8

Línea 9

Línea 10

Línea 11

Línea 12

Línea 13

Línea 14

Línea 15

Línea 16

Línea 17

Línea 18

Línea 19

Línea 20

Línea 21

Línea 22

Línea 23

Línea 24

Línea 25

Línea 26

Línea 27

Línea 28

Línea 29

Línea 30

Por debajo del mínimo

Dado un suelo, la zona flexible reclama una línea completa y la columna dimensionada se mueve por encima en lugar de ser comprimida a nada. Reduce la ventana para verlo plegarse.
zone--narrow
zone

Debajo del suelo que se le da a esta zona, toma una línea propia.

Tan ancho como su contenido

`zone--fit-content`: la región toma el ancho de lo que contiene — una tabla de muchas columnas — en lugar de lo que se le deja. La fila se desborda y se desplaza lateralmente como una, su barra de desplazamiento en la parte inferior del marco, no debajo de la tabla sola; cada región aún se desplaza hacia abajo por sí sola.

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Elemento 5

Elemento 6

Elemento 7

Elemento 8

Elemento 9

Elemento 10

Elemento 11

Elemento 12

Elemento 13

Elemento 14

Elemento 15

Elemento 16

Elemento 17

Elemento 18

Elemento 19

Elemento 20

Elemento 21

Elemento 22

Elemento 23

Elemento 24

Elemento 25

Elemento 26

Elemento 27

Elemento 28

Elemento 29

Elemento 30

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

Junto a una página

`zone--portrait`: nunca más estrecha que una página vertical (3:4) tan alta como la fila. Ensanchado a mano, el texto conserva su anchura y la fila se desplaza de lado en lugar de aplastar la página.
zone--measure (--zone-size: 48rem)

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Elemento 5

Elemento 6

Elemento 7

Elemento 8

Elemento 9

Elemento 10

Elemento 11

Elemento 12

v1.0.29