Khu vực

Khu vực

Không gian làm việc hai ngăn mà mọi trình duyệt, trình chỉnh sửa và chế độ xem chi tiết đều dựa vào. Một khu vực không có chiều rộng và chiều cao riêng: sự phân chia mà nó nằm trong đó sẽ xác định kích thước của nó, và mỗi bên cuộn độc lập. Hai khu vực là hai đối tượng đặt trên trang, không phải một bảng bị cắt đôi — điều phân biệt chúng là khoảng trống giữa chúng, và `zone--panel` là nền tảng mà mỗi cái đứng trên đó.

Một sự phân chia

Một cột đã được định kích thước, cột kia chiếm lấy phần còn lại. Kích thước được xác định bởi một bước, và đó là của riêng khu vực — nó không được kế thừa từ bất kỳ thứ gì nằm bên trong nó.
zone--narrow zone--size-6
zone

Bên này lấy bất cứ thứ gì cột đã định kích thước để lại.

Mỗi bên cuộn độc lập

Một khu vực có thể cuộn là cái chứa phần tràn, không phải trang. Cuộn một trong hai cái này và cái kia vẫn ở nguyên vị trí, đó là lý do chính cho hình dạng này.

Mục 1

Mục 2

Mục 3

Mục 4

Mục 5

Mục 6

Mục 7

Mục 8

Mục 9

Mục 10

Mục 11

Mục 12

Mục 13

Mục 14

Mục 15

Mục 16

Mục 17

Mục 18

Mục 19

Mục 20

Mục 21

Mục 22

Mục 23

Mục 24

Mục 25

Mục 26

Mục 27

Mục 28

Mục 29

Mục 30

Dòng 1

Dòng 2

Dòng 3

Dòng 4

Dòng 5

Dòng 6

Dòng 7

Dòng 8

Dòng 9

Dòng 10

Dòng 11

Dòng 12

Dòng 13

Dòng 14

Dòng 15

Dòng 16

Dòng 17

Dòng 18

Dòng 19

Dòng 20

Dòng 21

Dòng 22

Dòng 23

Dòng 24

Dòng 25

Dòng 26

Dòng 27

Dòng 28

Dòng 29

Dòng 30

Một tiêu đề không cuộn

Một sự phân chia chuyển thành dọc: một khu vực hẹp có chiều cao bằng những gì nó chứa, thân sẽ chiếm phần còn lại và cuộn bên dưới nó. Đây là cách sắp xếp của một bảng với thanh công cụ ở trên.
zone--narrow

Dòng 1

Dòng 2

Dòng 3

Dòng 4

Dòng 5

Dòng 6

Dòng 7

Dòng 8

Dòng 9

Dòng 10

Dòng 11

Dòng 12

Dòng 13

Dòng 14

Dòng 15

Dòng 16

Dòng 17

Dòng 18

Dòng 19

Dòng 20

Dòng 21

Dòng 22

Dòng 23

Dòng 24

Dòng 25

Dòng 26

Dòng 27

Dòng 28

Dòng 29

Dòng 30

Dưới mức tối thiểu

Khi có một sàn, khu vực linh hoạt chiếm một dòng đầy đủ và cột đã được định kích thước di chuyển ở trên thay vì cả hai bị ép lại thành không gì cả. Thu hẹp cửa sổ để thấy nó gập lại.
zone--narrow
zone

Dưới sàn mà khu vực này được cung cấp, nó chiếm một dòng riêng.

Rộng như nội dung của nó

`zone--fit-content`: vùng này chiếm chiều rộng của những gì nó chứa — một bảng với nhiều cột — thay vì những gì còn lại. Dòng sẽ tràn và cuộn sang một bên như một, thanh cuộn của nó ở chân khung, không chỉ dưới bảng; mỗi vùng vẫn cuộn xuống riêng.

Mục 1

Mục 2

Mục 3

Mục 4

Mục 5

Mục 6

Mục 7

Mục 8

Mục 9

Mục 10

Mục 11

Mục 12

Mục 13

Mục 14

Mục 15

Mục 16

Mục 17

Mục 18

Mục 19

Mục 20

Mục 21

Mục 22

Mục 23

Mục 24

Mục 25

Mục 26

Mục 27

Mục 28

Mục 29

Mục 30

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

Bên cạnh một trang

`zone--portrait`: không bao giờ hẹp hơn một trang dọc (3:4) cao bằng hàng. Khi được kéo rộng bằng tay, văn bản giữ độ rộng và hàng cuộn ngang thay vì ép trang lại.
zone--measure (--zone-size: 48rem)

Mục 1

Mục 2

Mục 3

Mục 4

Mục 5

Mục 6

Mục 7

Mục 8

Mục 9

Mục 10

Mục 11

Mục 12

v1.0.29