Zona

Zona

Workspace dua panel yang menjadi dasar setiap penjelajah, editor, dan tampilan detail. Sebuah zona tidak memiliki lebar dan tinggi sendiri: pemisahan tempatnya berada yang menentukan ukurannya, dan setiap sisi dapat menggulir secara terpisah. Dua zona adalah dua objek yang diletakkan di halaman, bukan satu panel yang dibagi dua — yang membedakannya adalah ruang di antara keduanya, dan `zone--panel` adalah dasar tempat masing-masing berdiri.

Sebuah pemisahan

Satu kolom berukuran, yang lainnya mengambil sisa ruang. Ukurannya ditentukan oleh langkah, dan itu adalah milik zona itu sendiri — tidak diwariskan oleh apa pun yang ada di dalamnya.
zone--narrow zone--size-6
zone

Sisi ini mengambil apa pun yang ditinggalkan kolom berukuran.

Setiap sisi menggulir secara terpisah

Zona yang dapat digulir adalah yang menampung overflow, bukan halaman. Gulir salah satu dari dua ini dan yang lainnya tetap di tempatnya, yang merupakan alasan utama bentuknya.

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

Baris 1

Baris 2

Baris 3

Baris 4

Baris 5

Baris 6

Baris 7

Baris 8

Baris 9

Baris 10

Baris 11

Baris 12

Baris 13

Baris 14

Baris 15

Baris 16

Baris 17

Baris 18

Baris 19

Baris 20

Baris 21

Baris 22

Baris 23

Baris 24

Baris 25

Baris 26

Baris 27

Baris 28

Baris 29

Baris 30

Sebuah header yang tidak menggulir

Sebuah pemisahan yang berubah vertikal: zona sempit adalah tinggi dari apa yang dipegangnya, tubuh mengambil sisa dan menggulir di bawahnya. Ini adalah pengaturan panel dengan toolbar di atas.
zone--narrow

Baris 1

Baris 2

Baris 3

Baris 4

Baris 5

Baris 6

Baris 7

Baris 8

Baris 9

Baris 10

Baris 11

Baris 12

Baris 13

Baris 14

Baris 15

Baris 16

Baris 17

Baris 18

Baris 19

Baris 20

Baris 21

Baris 22

Baris 23

Baris 24

Baris 25

Baris 26

Baris 27

Baris 28

Baris 29

Baris 30

Di bawah minimum

Diberikan sebuah lantai, zona fleksibel mengklaim satu baris penuh dan kolom yang berukuran bergerak di atasnya daripada keduanya dipaksa menjadi tidak ada. Persempit jendela untuk melihatnya melipat.
zone--narrow
zone

Di bawah lantai yang diberikan kepada zona ini, ia mengambil satu baris sendiri.

Selebar kontennya

`zone--fit-content`: wilayah mengambil lebar dari apa yang dipegangnya — tabel dengan banyak kolom — daripada apa yang tersisa untuknya. Baris meluap dan menggulir secara horizontal sebagai satu kesatuan, scrollbar-nya di bagian bawah bingkai, bukan di bawah tabel saja; setiap wilayah masih menggulir ke bawah dengan sendirinya.

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

Di samping halaman

`zone--portrait`: tidak pernah lebih sempit dari halaman potret (3:4) setinggi baris. Jika dilebarkan manual, teks mempertahankan lebarnya dan baris bergulir ke samping alih-alih memeras halaman.
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