زون‌ها

زون‌ها

فضای کاری دو صفحه‌ای که هر اکتشاف‌گر، ویرایش‌گر و نمای جزئیات بر اساس آن ساخته شده است. یک زون هیچ عرض و ارتفاعی به خودی خود ندارد: شکاف موجود در آن است که اندازه‌اش را تعیین می‌کند و هر طرف به‌طور مستقل اسکرول می‌شود. دو زون دو شیء هستند که روی صفحه قرار دارند، نه یک پنل که به دو نیم تقسیم شده — چیزی که آن‌ها را از هم متمایز می‌کند، فضایی است که بین آن‌ها وجود دارد و `zone--panel` زمینی است که هر یک بر روی آن ایستاده است.

یک تقسیم

یک ستون اندازه‌گیری شده، دیگری آنچه را که باقی مانده است می‌گیرد. اندازه با یک مرحله داده می‌شود و این اندازه خود زون است — از هیچ چیزی که درون آن باشد، به ارث نمی‌رسد.
zone--narrow zone--size-6
zone

این طرف هر آنچه را که ستون اندازه‌گیری شده باقی می‌گذارد، می‌گیرد.

هر طرف به‌طور مستقل اسکرول می‌شود

یک زون قابل اسکرول چیزی است که Overflow را نگه می‌دارد، نه صفحه. یکی از این دو را اسکرول کنید و دیگری در جایی که است باقی می‌ماند، که دلیل اصلی شکل آن است.

آیتم 1

آیتم 2

آیتم 3

آیتم 4

آیتم 5

آیتم 6

آیتم 7

آیتم 8

آیتم 9

آیتم 10

آیتم 11

آیتم 12

آیتم 13

آیتم 14

آیتم 15

آیتم 16

آیتم 17

آیتم 18

آیتم 19

آیتم 20

آیتم 21

آیتم 22

آیتم 23

آیتم 24

آیتم 25

آیتم 26

آیتم 27

آیتم 28

آیتم 29

آیتم 30

خط 1

خط 2

خط 3

خط 4

خط 5

خط 6

خط 7

خط 8

خط 9

خط 10

خط 11

خط 12

خط 13

خط 14

خط 15

خط 16

خط 17

خط 18

خط 19

خط 20

خط 21

خط 22

خط 23

خط 24

خط 25

خط 26

خط 27

خط 28

خط 29

خط 30

یک هدر که اسکرول نمی‌شود

یک تقسیم عمودی: یک زون باریک به ارتفاع آنچه که نگه می‌دارد، و بدنه باقی‌مانده را می‌گیرد و زیر آن اسکرول می‌شود. این ترتیب یک پنل با یک نوار ابزار در بالای آن است.
zone--narrow

خط 1

خط 2

خط 3

خط 4

خط 5

خط 6

خط 7

خط 8

خط 9

خط 10

خط 11

خط 12

خط 13

خط 14

خط 15

خط 16

خط 17

خط 18

خط 19

خط 20

خط 21

خط 22

خط 23

خط 24

خط 25

خط 26

خط 27

خط 28

خط 29

خط 30

کمتر از حداقل

با توجه به یک کف، زون انعطاف‌پذیر یک خط کامل را تصاحب می‌کند و ستون اندازه‌گیری شده به جای اینکه هر دو به هیچ تبدیل شوند، بالای آن حرکت می‌کند. پنجره را باریک کنید تا ببینید که چگونه جمع می‌شود.
zone--narrow
zone

زیر کف این زون، خطی از خود را می‌گیرد.

به عرض محتوای خود

`zone--fit-content`: این ناحیه به عرض محتوای خود می‌رسد — یک جدول با چندین ستون — نه به آنچه که برایش باقی مانده است. ردیف به صورت یکپارچه سرریز شده و به سمت کناره‌ها اسکرول می‌شود، نوار اسکرول آن در پایین قاب قرار دارد، نه فقط زیر جدول؛ هر ناحیه هنوز به صورت جداگانه به سمت پایین اسکرول می‌شود.

آیتم 1

آیتم 2

آیتم 3

آیتم 4

آیتم 5

آیتم 6

آیتم 7

آیتم 8

آیتم 9

آیتم 10

آیتم 11

آیتم 12

آیتم 13

آیتم 14

آیتم 15

آیتم 16

آیتم 17

آیتم 18

آیتم 19

آیتم 20

آیتم 21

آیتم 22

آیتم 23

آیتم 24

آیتم 25

آیتم 26

آیتم 27

آیتم 28

آیتم 29

آیتم 30

zone--fit-content
ستون 1ستون 2ستون 3ستون 4ستون 5ستون 6ستون 7ستون 8ستون 9ستون 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

کنار یک صفحه

`zone--portrait`: هرگز باریک‌تر از یک صفحهٔ عمودی (3:4) به بلندی ردیف نیست. متنی که با دست پهن شود پهنایش را نگه می‌دارد و ردیف به‌جای فشردن صفحه، افقی پیمایش می‌شود.
zone--measure (--zone-size: 48rem)

آیتم 1

آیتم 2

آیتم 3

آیتم 4

آیتم 5

آیتم 6

آیتم 7

آیتم 8

آیتم 9

آیتم 10

آیتم 11

آیتم 12