المناطق

المناطق

مساحة العمل ذات اللوحين التي يعتمد عليها كل مستكشف ومحرر وعرض تفاصيل. المنطقة ليس لها عرض أو ارتفاع خاص بها: الانقسام الذي تجلس فيه هو ما يحدد حجمها، وكل جانب يتمرر بمفرده. منطقتان هما كائنان موضوعة على الصفحة، وليست لوحة واحدة مقسومة إلى نصفين - ما يميزها هو المسافة بينهما، و`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