زونز

زونز

دو پین والا ورک اسپیس جس پر ہر ایک ایکسپلورر، ایڈیٹر اور تفصیل کا منظر بنایا گیا ہے۔ ایک زون کی اپنی کوئی چوڑائی اور اونچائی نہیں ہوتی: یہ جس تقسیم میں واقع ہے، وہی اس کا سائز طے کرتی ہے، اور ہر طرف اکیلا ہی سکرول ہوتا ہے۔ دو زونز دو اشیاء ہیں جو صفحے پر رکھی گئی ہیں، نہ کہ ایک پینل جو آدھا کٹا ہو — ان کو الگ کرنے والی چیز ان کے درمیان کا خلا ہے، اور `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