โซน

โซน

พื้นที่ทำงานที่มีสองพาเนลซึ่งทุกการสำรวจ การแก้ไข และมุมมองรายละเอียดถูกสร้างขึ้น โซนไม่มีความกว้างและความสูงของตัวเอง: การแบ่งที่มันนั่งอยู่คือสิ่งที่กำหนดขนาดของมัน และแต่ละด้านเลื่อนแยกกัน สองโซนคือวัตถุสองชิ้นที่วางอยู่บนหน้า ไม่ใช่แผงที่ถูกตัดครึ่ง — สิ่งที่บอกความแตกต่างของพวกมันคือพื้นที่ระหว่างกัน และ `zone--panel` คือพื้นฐานที่แต่ละอันยืนอยู่

การแบ่ง

หนึ่งคอลัมน์มีขนาดและอีกคอลัมน์หนึ่งจะใช้สิ่งที่เหลือ ขนาดจะถูกกำหนดโดยขั้นตอน และมันคือขนาดของโซนเอง — มันไม่ได้สืบทอดจากสิ่งที่อยู่ภายในมัน
zone--narrow zone--size-6
zone

ด้านนี้รับสิ่งที่คอลัมน์ที่มีขนาดทิ้งไว้

แต่ละด้านเลื่อนแยกกัน

โซนที่เลื่อนเลื่อนได้คือสิ่งที่ถือการล้น ไม่ใช่หน้า เลื่อนหนึ่งในสองนี้และอีกด้านจะอยู่ที่เดิม ซึ่งเป็นเหตุผลทั้งหมดของรูปทรงนี้

รายการ 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