درس ۳۵ از ۴۵ · صفحه‌های وب

چیدمان: جریان، فلکس و شبکه

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

در این درس

جریان عادی
موقعیت و فاصله از لبه‌ها
چسبان و ثابت
لایه‌ها و ترتیب لایه
شناوری و پاک‌سازی
فلکس: عنصرها در یک خط
اندازه‌ی عنصرهای فلکس از کجا می‌آید
دستورهای آماده با فلکس
شبکه: ردیف و ستون با هم
جا دادن عنصرها: خط‌ها، گستره‌ها و ناحیه‌ها
ترازبندی در فلکس و شبکه
متن چندستونی
صفحه‌های راست‌به‌چپ
مرجع: همه‌ی ویژگی‌های چیدمان
خودتان امتحان کنید

جریان عادی

اگر چیزی تنظیم نکنید، مرورگر جعبه‌ها را در جریان عادی می‌چیند. جعبه‌ی بلوکی، مثل جعبه یا پاراگراف، همه‌ی پهنای والدش را می‌گیرد و از سطر تازه شروع می‌شود. جعبه‌ی خطی، مثل تکه یا پیوند، درون سطر متن می‌ماند و فقط به اندازه‌ی محتوایش پهن است. عرض و ارتفاع روی جعبه‌ی خطی اثر ندارند. نمایش = "خطی بلوکی" (inline-block) راه میانه است: مثل یک کلمه درون سطر می‌نشیند، ولی مثل بلوک عرض و ارتفاع و فضای بالا و پایین دارد.

web-layout-flow.salam

صفحه:
    عنوان = "جریان عادی"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه: پس زمینه = "#dbeafe" فاصله = 10 فضا پایین = 8 محتوا = "بلوک اول همه‌ی پهنا را می‌گیرد." پایان
    جعبه: پس زمینه = "#bfdbfe" فاصله = 10 فضا پایین = 8 محتوا = "بلوک دوم از سطر تازه شروع می‌شود." پایان
    پاراگراف:
        محتوا = "عنصرهای خطی در همان سطر می‌مانند: "
        تکه: پس زمینه = "#fde68a" فاصله = "2 6" محتوا = "یک" پایان
        تکه: پس زمینه = "#fcd34d" فاصله = "2 6" محتوا = "دو" پایان
        تکه: پس زمینه = "#fbbf24" فاصله = "2 6" محتوا = "سه" پایان
    پایان
    جعبه: نمایش = "خطی بلوکی" عرض = 120 ارتفاع = 50 پس زمینه = "#bbf7d0" فضا = 4 محتوا = "خطی بلوکی" پایان
    جعبه: نمایش = "خطی بلوکی" عرض = 120 ارتفاع = 50 پس زمینه = "#86efac" فضا = 4 محتوا = "خطی بلوکی" پایان
پایان

همه‌ی بقیه‌ی این درس درباره‌ی این است که جعبه‌ها چطور از این جریان بیرون بروند. در بیشتر موارد اصلاً بیرونشان نمی‌برید: روی والد نمایش = فلکس یا نمایش = شبکه می‌گذارید و والد فرزندانش را می‌چیند.

دو نکته در نمونه‌ها هست که باید بدانید. سراسری: اندازه جعبه = "border-box" باعث می‌شود عرض فاصله‌ی درونی و کادر را هم در بر بگیرد، که حساب‌کردن را آسان‌تر می‌کند. و عدد تنها مثل فاصله = 10 یعنی پیکسل؛ برای واحد دیگر رشته بنویسید، مثل "2rem" یا "50%".

موقعیت و فاصله از لبه‌ها

موقعیت (position) تعیین می‌کند جعبه چطور چیده شود، و بالا، راست، پایین و چپ (یا کوتاه‌نویسی فاصله از لبه) می‌گویند از کدام لبه چقدر فاصله بگیرد. پیش‌فرض ایستا (static) است: جریان عادی، و فاصله‌ها اثری ندارند.

نسبی (relative): جعبه جا و فضای خودش را در جریان نگه می‌دارد و بعد به اندازه‌ی فاصله‌ها جابه‌جا کشیده می‌شود. بقیه‌ی جعبه‌ها خبردار نمی‌شوند.
مطلق (absolute): جعبه کاملاً از جریان بیرون می‌رود. نسبت به نزدیک‌ترین والدی چیده می‌شود که خودش موقعیت‌دار است (هر چیزی جز ایستا)، و اگر چنین والدی نباشد نسبت به کل صفحه.
ثابت (fixed): مثل مطلق ولی نسبت به پنجره، پس هنگام پیمایش صفحه سر جایش می‌ماند. برای نواری که باید همیشه دیده شود.
چسبان (sticky): تا وقتی جعبه از فاصله‌اش رد نشده جریان عادی دارد، بعد همان‌جا می‌چسبد تا والدش تمام شود.

الگوی همیشگی یک والد نسبی با فرزندان مطلق است: والد فقط مرجع است. در نمونه‌ی زیر کارت مرجع نشان گوشه و نوار پایین است.

web-layout-position.salam

صفحه:
    عنوان = "نسبی و مطلق"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        موقعیت = نسبی عرض = 280 ارتفاع = 150 پس زمینه = "#e0f2fe" کادر = "2px solid #0284c7"
        پاراگراف: فضا = 12 فضا انتها = 70 محتوا = "کارت والدِ موقعیت‌دار است." پایان
        جعبه: موقعیت = مطلق بالا = 10 فاصله از لبه خطی انتها = 10 پس زمینه = "#dc2626" رنگ = "white" فاصله = "4 10" گردی کادر = 12 محتوا = "تازه" پایان
        جعبه: موقعیت = مطلق پایین = 0 چپ = 0 راست = 0 پس زمینه = "#0369a1" رنگ = "white" فاصله = 8 محتوا = "چسبیده به لبه‌ی پایین" پایان
    پایان
    پاراگراف: محتوا = "متن بعد از کارت را جعبه‌های مطلق جابه‌جا نمی‌کنند." پایان
پایان

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

سه مقدار را خودتان امتحان کنید. جعبه‌ی آبی بالا = 30 و یک فاصله از سوی آغاز دارد. تا وقتی ایستا است فاصله‌ها نادیده گرفته می‌شوند. با نسبی جابه‌جا می‌شود ولی جایش خالی نمی‌ماند، پس جعبه‌ی سبز بالا نمی‌آید. با مطلق از جریان بیرون می‌رود: جعبه‌ی سبز بالا می‌آید و جای آبی را می‌گیرد، و آبی از قاب خط‌چین اندازه‌گیری می‌شود.

web-layout-position-play.salam

واردسازی دام

صفحه:
    عنوان = "همه‌ی موقعیت‌ها را امتحان کنید"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 16 پایان
    جعبه:
        نمایش = فلکس شکاف = 8 فضا پایین = 12
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("target")، "position"، "static") پایان محتوا = "ایستا" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("target")، "position"، "relative") پایان محتوا = "نسبی" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("target")، "position"، "absolute") پایان محتوا = "مطلق" پایان
    پایان
    جعبه:
        موقعیت = نسبی ارتفاع = 150 پس زمینه = "#f1f5f9" کادر = "2px dashed #94a3b8" فاصله = 8
        جعبه: پس زمینه = "#fca5a5" عرض = 90 ارتفاع = 36 محتوا = "اول" پایان
        جعبه: شناسه = "target" بالا = 30 فاصله از لبه خطی آغاز = 120 پس زمینه = "#2563eb" رنگ = "white" عرض = 90 ارتفاع = 36 محتوا = "هدف" پایان
        جعبه: پس زمینه = "#86efac" عرض = 90 ارتفاع = 36 محتوا = "سوم" پایان
    پایان
پایان

فاصله‌ها دو خانواده‌اند. بالا، راست، پایین و چپ فیزیکی‌اند: راست همیشه راست صفحه‌ی نمایش است. فاصله از لبه خطی آغاز، فاصله از لبه خطی انتها، فاصله از لبه بلوکی آغاز و فاصله از لبه بلوکی انتها منطقی‌اند: جهت نوشتن را دنبال می‌کنند، پس آغاز در انگلیسی چپ است و در فارسی راست. شکل‌های دومقداری فاصله از لبه خطی و فاصله از لبه بلوکی هر دو سر را با هم می‌گذارند. هر جا موضوع ترتیب خواندن است، مثل نشان بالا، منطقی‌ها را ترجیح بدهید.

چسبان و ثابت

جعبه‌ی چسبان برای دانستن جای چسبیدن یک فاصله لازم دارد، معمولاً بالا = 0. در نزدیک‌ترین والدِ پیمایش‌شدنی می‌چسبد و هرگز از والد خودش بیرون نمی‌رود، پس وقتی بخش بعد می‌رسد سرتیتر چسبان کنار زده می‌شود. جعبه‌ی زیر ارتفاع ثابت و سرریز = خودکار دارد، پس خودش پیمایش می‌شود. پیمایشش کنید: هر سرتیتر بالا می‌ماند تا بعدی جایش را بگیرد.

web-layout-sticky.salam

صفحه:
    عنوان = "سرتیترهای چسبان"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 16 پایان
    جعبه:
        ارتفاع = 220 سرریز = خودکار کادر = "2px solid #94a3b8"
        سرتیتر: اندازه = 3 موقعیت = چسبان بالا = 0 فضا = 0 فاصله = 8 پس زمینه = "#fde68a" محتوا = "میوه‌ها" پایان
        پاراگراف: فاصله = 8 محتوا = "سیب، گلابی و آلو. این جعبه را بالا و پایین ببرید و ببینید سرتیتر بالای آن می‌ماند." پایان
        پاراگراف: فاصله = 8 محتوا = "گیلاس و زردآلو در آغاز تابستان." پایان
        پاراگراف: فاصله = 8 محتوا = "به و ازگیل در پاییز." پایان
        سرتیتر: اندازه = 3 موقعیت = چسبان بالا = 0 فضا = 0 فاصله = 8 پس زمینه = "#bbf7d0" محتوا = "سبزی‌ها" پایان
        پاراگراف: فاصله = 8 محتوا = "هویج، تره و چغندر در انباری خنک خوب می‌مانند." پایان
        پاراگراف: فاصله = 8 محتوا = "اسفناج و کاهو زود رشد می‌کنند اما نمی‌مانند." پایان
        پاراگراف: فاصله = 8 محتوا = "سیب‌زمینی و پیاز را می‌شود ماه‌ها نگه داشت." پایان
    پایان
پایان

ثابت هم همین‌طور است، ولی نسبت به پنجره و بی‌محدودیت والد. به نوار ثابت بالا = 0 چپ = 0 راست = 0 بدهید تا همه‌ی پهنای پنجره را بگیرد. چون از جریان بیرون است، محتوای زیرش از زیر نوار شروع می‌شود، پس ارتفاع نوار را بالای صفحه به‌عنوان فاصله‌ی درونی اضافه کنید.

لایه‌ها و ترتیب لایه

وقتی جعبه‌های موقعیت‌دار روی هم می‌افتند، آنکه در کد دیرتر آمده بالاتر کشیده می‌شود. ترتیب لایه (z index) این را عوض می‌کند: عدد صحیح بزرگ‌تر بالاتر از عدد کوچک‌تر کشیده می‌شود و عدد منفی پشت می‌رود. روی جعبه‌های موقعیت‌دار و عنصرهای فلکس و شبکه کار می‌کند.

web-layout-zindex.salam

صفحه:
    عنوان = "ترتیب لایه‌ها"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        موقعیت = نسبی ارتفاع = 180
        جعبه: موقعیت = مطلق بالا = 60 چپ = 120 عرض = 150 ارتفاع = 110 پس زمینه = "#86efac" ترتیب لایه = 3 فاصله = 8 اندازه قلم = 28 محتوا = "3" پایان
        جعبه: موقعیت = مطلق بالا = 0 چپ = 0 عرض = 150 ارتفاع = 110 پس زمینه = "#fca5a5" ترتیب لایه = 1 فاصله = 8 اندازه قلم = 28 محتوا = "1" پایان
        جعبه: موقعیت = مطلق بالا = 30 چپ = 60 عرض = 150 ارتفاع = 110 پس زمینه = "#93c5fd" ترتیب لایه = 2 فاصله = 8 اندازه قلم = 28 محتوا = "2" پایان
    پایان
    پاراگراف: محتوا = "جعبه‌ای که ترتیب لایه‌اش بزرگ‌تر است بالاتر کشیده می‌شود، هر ترتیبی که در کد داشته باشد." پایان
پایان

بعضی جعبه‌ها بافت لایه‌ای (stacking context) خودشان را می‌سازند، گروهی که مثل یک تکه مرتب می‌شود: جعبه‌ی موقعیت‌دار با ترتیب لایه، عنصری با opacity کمتر از ۱، یا عنصری با transform. درون یک بافت، عددها فقط با هم رقابت می‌کنند. برای همین منویی با ترتیب لایه = 9999 هم می‌تواند پشت جعبه‌ای با ترتیب لایه = 2 بماند: در بافت‌های جدا هستند. وقتی عددی اثری ندارد، دنبال والدی بگردید که بافت ساخته است.

شناوری و پاک‌سازی

جعبه‌ی شناور از سطر بیرون می‌رود و به یک سو می‌چسبد و متنِ بعدی دورش می‌پیچد. کار امروزش همین است: عکس یا نقل‌قولی میان متن. روزگاری صفحه را با شناوری می‌ساختند، ولی فلکس و شبکه جایش را گرفتند. پاک‌سازی شناوری (clear) جعبه را وامی‌دارد زیر شناورها شروع شود و کنارشان نیاید. مقدار inline-start جهت متن را دنبال می‌کند، پس نمونه در هر دو زبان درست کار می‌کند.

web-layout-float.salam

صفحه:
    عنوان = "دور پیچیدن متن به دور یک جعبه"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 بیشینه عرض = 480 ارتفاع خط = 1.5 پایان
    جعبه: شناوری = "inline-start" عرض = 110 ارتفاع = 90 فضا = "4 0 6" فضا انتها = 14 پس زمینه = "#fcd34d" فاصله = 8 محتوا = "شناور" پایان
    پاراگراف: محتوا = "جعبه‌ی شناور از جریان عادی بیرون می‌رود و به یک سو می‌چسبد، و سطرهای متنِ بعدی دور آن می‌پیچند. عکس‌های میان نوشته‌های مجله همین‌طور می‌نشینند. این نوشته را آن‌قدر ادامه بدهید که از جعبه بلندتر شود و زیر آن بپیچد." پایان
    جعبه: پاک‌سازی شناوری = دوسو پس زمینه = "#e2e8f0" فاصله = 8 محتوا = "پاک‌سازی دوسو: این جعبه زیر جعبه‌ی شناور شروع می‌شود." پایان
پایان

روی عنصر فلکس یا شبکه شناوری نادیده گرفته می‌شود. اگر والدِ یک جعبه‌ی شناور از آن کوتاه‌تر باشد، والد برای در بر گرفتنش بزرگ نمی‌شود. بعد از آن عنصری با پاک‌سازی شناوری = دوسو بگذارید، یا به والد نمایش = "flow-root" بدهید.

فلکس: عنصرها در یک خط

روی والد نمایش = فلکس بگذارید تا فرزندانش عنصر فلکس شوند و در یک خط چیده شوند که به آن محور اصلی می‌گویند. جهت دیگر محور عرضی است. جهت فلکس (flex direction) محور اصلی را تعیین می‌کند: ردیفی (پیش‌فرض، در جهت متن)، ستونی یا شکل‌های وارونه‌ی آن‌ها. دو ویژگی عنصرها را می‌چینند:

چینش (justify content) عنصرها را در امتداد محور اصلی پخش می‌کند: flex-start، flex-end، center، space-between، space-around، space-evenly.
ترازعمودی (align items) آن‌ها را در محور عرضی می‌چیند: stretch (پیش‌فرض، پس عنصرها به بلندی سطرند)، flex-start، flex-end، center، baseline.

با هم کوتاه‌ترین راه وسط‌چین کردن یک جعبه از هر دو سو را می‌دهند:

web-layout-center.salam

صفحه:
    عنوان = "وسط‌چین کردن"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        نمایش = فلکس چینش = وسط ترازعمودی = وسط ارتفاع = 180 پس زمینه = "#ede9fe" گردی کادر = 12
        جعبه: پس زمینه = "#7c3aed" رنگ = "white" فاصله = "14 26" گردی کادر = 8 محتوا = "وسط از هر دو سو" پایان
    پایان
پایان

زمین بازی زیر این دو ویژگی و جهت را با دکمه عوض می‌کند. دقت کنید وقتی ستونی را انتخاب می‌کنید معنای «چینش» و «تراز» جابه‌جا می‌شود: چینش همیشه محور اصلی است، هر طرف که برود.

web-layout-flex-play.salam

واردسازی دام

صفحه:
    عنوان = "زمین بازی فلکس"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 16 پایان
    جعبه:
        نمایش = فلکس پیچش آرایش = پیچیده شکاف = 6 فضا پایین = 12
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("row")، "flex-direction"، "row") پایان محتوا = "ردیفی" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("row")، "flex-direction"، "column") پایان محتوا = "ستونی" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("row")، "justify-content"، "flex-start") پایان محتوا = "آغاز" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("row")، "justify-content"، "center") پایان محتوا = "وسط" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("row")، "justify-content"، "space-between") پایان محتوا = "فاصله میان" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("row")، "align-items"، "flex-start") پایان محتوا = "عمودی: آغاز" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("row")، "align-items"، "center") پایان محتوا = "عمودی: وسط" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("row")، "align-items"، "flex-end") پایان محتوا = "عمودی: انتها" پایان
    پایان
    جعبه:
        شناسه = "row" نمایش = فلکس ترازعمودی = "آغاز فلکس" شکاف = 8 ارتفاع = 170 پس زمینه = "#f1f5f9" کادر = "2px solid #94a3b8" فاصله = 8
        جعبه: پس زمینه = "#f87171" فاصله = 10 محتوا = "1" پایان
        جعبه: پس زمینه = "#60a5fa" فاصله = "20 10" محتوا = "2" پایان
        جعبه: پس زمینه = "#4ade80" فاصله = "30 10" محتوا = "3" پایان
    پایان
پایان

شکاف (gap) بی‌آنکه روی عنصرها فضا بگذارید میانشان فاصله می‌اندازد. یک مقدار برای هر دو سو به کار می‌رود، و دو مقدار یعنی اول فاصله‌ی ردیف‌ها و بعد ستون‌ها. شکاف ردیف و شکاف ستون آن‌ها را جدا می‌گذارند. پیچش آرایش = پیچیده (flex wrap = wrap) اجازه می‌دهد عنصرهایی که جا نمی‌شوند به سطر تازه بروند، و جریان فلکس جهت و پیچش را با هم تعیین می‌کند، مثل "row wrap". وقتی بیش از یک سطر هست، محتوا تراز (align content) سطرها را در ظرف پخش می‌کند.

اندازه‌ی عنصرهای فلکس از کجا می‌آید

هر عنصر فلکس از پایه فلکس خودش شروع می‌کند (در یک ردیف، عرضش وقتی پایه auto است)، و بعد جای خالی تقسیم می‌شود. رشد فلکس می‌گوید عنصر چند سهم از جای اضافه را بگیرد و جمع‌شدن فلکس می‌گوید وقتی عنصرها جا نمی‌شوند چقدر از کمبود را بپذیرد. کوتاه‌نویسی فلکس هر سه را می‌گذارد: فلکس = 1 یعنی «برابر رشد کن، از صفر شروع کن» و فلکس = "0 0 120px" یک عنصر ثابت ۱۲۰ پیکسلی است. کوتاه‌نویسی را ترجیح بدهید، چون بخش‌هایی را که ننوشته‌اید به مقدارهای معقول برمی‌گرداند.

web-layout-flex-sizes.salam

صفحه:
    عنوان = "رشد، جمع‌شدن و پایه"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    پاراگراف: فضا = "0 0 6" محتوا = "رشد فلکس ۱ و ۲ و ۱" پایان
    جعبه:
        نمایش = فلکس شکاف = 8 فضا پایین = 16
        جعبه: رشد فلکس = 1 پس زمینه = "#fca5a5" فاصله = 10 محتوا = "1" پایان
        جعبه: رشد فلکس = 2 پس زمینه = "#93c5fd" فاصله = 10 محتوا = "2" پایان
        جعبه: رشد فلکس = 1 پس زمینه = "#86efac" فاصله = 10 محتوا = "1" پایان
    پایان
    پاراگراف: فضا = "0 0 6" محتوا = "جعبه‌ی ثابت ۱۲۰ پیکسلی، بعد فلکس = ۱" پایان
    جعبه:
        نمایش = فلکس شکاف = 8
        جعبه: فلکس = "0 0 120px" پس زمینه = "#fcd34d" فاصله = 10 محتوا = "ثابت" پایان
        جعبه: فلکس = 1 پس زمینه = "#c4b5fd" فاصله = 10 محتوا = "بقیه را می‌گیرد" پایان
    پایان
پایان

دو ویژگی روی یک عنصر کار می‌کنند. خود تراز (align self) ترازعمودی را برای همان عنصر عوض می‌کند. ترتیب نمایش (order) جایی را که کشیده می‌شود عوض می‌کند: عنصرها با شماره‌ی ترتیبشان مرتب می‌شوند، کمترین اول، و عنصرهای هم‌شماره به ترتیب کد می‌مانند.

web-layout-flex-order.salam

صفحه:
    عنوان = "ترتیب و ترازِ خود عنصر"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        نمایش = فلکس شکاف = 8 ارتفاع = 130 پس زمینه = "#f1f5f9" ترازعمودی = "آغاز فلکس" فاصله = 8
        جعبه: ترتیب نمایش = 3 پس زمینه = "#fca5a5" فاصله = 12 محتوا = "ترتیب ۳" پایان
        جعبه: ترتیب نمایش = 1 پس زمینه = "#93c5fd" فاصله = 12 محتوا = "ترتیب ۱" پایان
        جعبه: ترتیب نمایش = 2 خود تراز = "انتهای فلکس" پس زمینه = "#86efac" فاصله = 12 محتوا = "ترتیب ۲، خودش در انتها" پایان
        جعبه: خود تراز = وسط پس زمینه = "#fcd34d" فاصله = 12 محتوا = "خودش در وسط" پایان
    پایان
پایان

ترتیب نمایش فقط چیزی را که مردم می‌بینند عوض می‌کند. صفحه‌خوان‌ها و کلید Tab همچنان ترتیب کد را می‌روند. برای اصلاح‌های کوچک ظاهری از آن استفاده کنید و محتوا را به ترتیب واقعی خواندنش بنویسید.

دستورهای آماده با فلکس

چهار چیدمان که بارها می‌نویسید. نوار ناوبری: یک ردیف فلکس، و یک فضای خودکار در انتهای عنصر اول که بقیه را کنار می‌زند. فضای خودکار همه‌ی جای خالی را می‌گیرد و فضا انتها (margin inline end) جهت متن را دنبال می‌کند.

web-layout-navbar.salam

صفحه:
    عنوان = "نوار ناوبری"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 0 پایان
    ناوبری:
        نمایش = فلکس ترازعمودی = وسط شکاف = 20 پس زمینه = "#0f172a" رنگ = "white" فاصله = "0 20" ارتفاع = 56
        تکه: وزن قلم = 700 اندازه قلم = 18 فضا انتها = خودکار محتوا = "نان‌پزی" پایان
        پیوند: نشانی = "#" رنگ = "white" محتوا = "نان" پایان
        پیوند: نشانی = "#" رنگ = "white" محتوا = "کیک" پایان
        پیوند: نشانی = "#" رنگ = "white" محتوا = "تماس" پایان
        دکمه: پس زمینه = "#f59e0b" کادر = "none" فاصله = "8 14" گردی کادر = 6 محتوا = "سفارش" پایان
    پایان
    پاراگراف: فاصله = 20 محتوا = "فضای خودکار کنار نام همه‌ی جای خالی را می‌گیرد و هر چه بعد از آن است به انتها می‌رود." پایان
پایان

نوار کناری با محتوا: نوار کناری پایه‌ی ثابت دارد و رشد نمی‌کند، محتوا هر چه می‌ماند را می‌گیرد.

web-layout-sidebar.salam

صفحه:
    عنوان = "نوار کناری و محتوا"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 0 پایان
    جعبه:
        نمایش = فلکس کمینه ارتفاع = 260
        کناری: فلکس = "0 0 160px" پس زمینه = "#1e293b" رنگ = "white" فاصله = 16
            سرتیتر: اندازه = 3 فضا = "0 0 8" محتوا = "فهرست" پایان
            پاراگراف: محتوا = "صندوق ورودی" پایان
            پاراگراف: محتوا = "فرستاده‌شده" پایان
            پاراگراف: محتوا = "پیش‌نویس‌ها" پایان
        پایان
        اصلی: فلکس = 1 فاصله = 20 پس زمینه = "#f8fafc"
            سرتیتر: اندازه = 2 فضا = "0 0 8" محتوا = "صندوق ورودی" پایان
            پاراگراف: محتوا = "نوار کناری ۱۶۰ پیکسل می‌ماند. محتوا بقیه را می‌گیرد و با پنجره بزرگ و کوچک می‌شود." پایان
        پایان
    پایان
پایان

کارت‌هایی که به سطر بعد می‌روند: هر کارت فلکس = "1 1 160px" دارد، یعنی «۱۶۰ پیکسل می‌خواهم، ولی رشد و جمع‌شدن می‌کنم». در صفحه‌ی پهن پنج کارت در یک سطر جا می‌شوند و در تلفن همراه هر سطر یکی، بی‌هیچ پرس‌وجوی رسانه. آخرین سطر کش می‌آید؛ اگر نمی‌خواهید، از شبکه‌ی پایین استفاده کنید.

web-layout-cards-wrap.salam

صفحه:
    عنوان = "کارت‌هایی که به سطر بعد می‌روند"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        نمایش = فلکس پیچش آرایش = پیچیده شکاف = 12
        جعبه: فلکس = "1 1 160px" پس زمینه = "#fecaca" فاصله = 16 گردی کادر = 8 محتوا = "کارت اول" پایان
        جعبه: فلکس = "1 1 160px" پس زمینه = "#fed7aa" فاصله = 16 گردی کادر = 8 محتوا = "کارت دوم" پایان
        جعبه: فلکس = "1 1 160px" پس زمینه = "#fde68a" فاصله = 16 گردی کادر = 8 محتوا = "کارت سوم" پایان
        جعبه: فلکس = "1 1 160px" پس زمینه = "#bbf7d0" فاصله = 16 گردی کادر = 8 محتوا = "کارت چهارم" پایان
        جعبه: فلکس = "1 1 160px" پس زمینه = "#bae6fd" فاصله = 16 گردی کادر = 8 محتوا = "کارت پنجم" پایان
    پایان
پایان

پاورقی ته صفحه‌ی کوتاه: صفحه یک ستون با دست‌کم ارتفاع پنجره است و بخش اصلی رشد می‌کند تا جا را پر کند.

web-layout-footer.salam

صفحه:
    عنوان = "پاورقی چسبیده به پایین"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 0 پایان
    جعبه:
        نمایش = فلکس جهت فلکس = ستونی کمینه ارتفاع = "100vh"
        سرصفحه: پس زمینه = "#0f766e" رنگ = "white" فاصله = 14 محتوا = "سرصفحه" پایان
        اصلی: فلکس = 1 فاصله = 16 محتوا = "صفحه کوتاه است، ولی پاورقی پایین می‌ماند." پایان
        پاورقی: پس زمینه = "#134e4a" رنگ = "white" فاصله = 14 محتوا = "پاورقی" پایان
    پایان
پایان

شبکه: ردیف و ستون با هم

فلکس هر بار یک خط را می‌چیند. شبکه هر دو جهت را با هم می‌چیند. نمایش = شبکه بگذارید و ستون‌ها را با ستون های شبکه (grid template columns) بنویسید، یک اندازه برای هر ستون. اندازه‌ها می‌توانند طول، درصد، auto و واحد fr باشند، یعنی کسری از جای خالی: "1fr 2fr" ستون دوم را دو برابر اولی می‌کند. repeat(3, 1fr) سه ستون برابر است. ردیف‌ها به اندازه‌ی نیاز ساخته می‌شوند و ردیف‌ها الگو شبکه و ردیف‌های خودکار شبکه اندازه‌شان را تعیین می‌کنند. شکاف، شکاف ردیف و شکاف ستون مثل فلکس کار می‌کنند.

web-layout-grid.salam

صفحه:
    عنوان = "ستون‌های شبکه"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        نمایش = شبکه ستون های شبکه = "100px 1fr 2fr" ردیف‌های خودکار شبکه = 60 شکاف = 10
        جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "100px" پایان
        جعبه: پس زمینه = "#fcd34d" فاصله = 8 محتوا = "1fr" پایان
        جعبه: پس زمینه = "#86efac" فاصله = 8 محتوا = "2fr" پایان
        جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "4" پایان
        جعبه: پس زمینه = "#c4b5fd" فاصله = 8 محتوا = "5" پایان
        جعبه: پس زمینه = "#f9a8d4" فاصله = 8 محتوا = "6" پایان
    پایان
پایان

در صفحه‌ی بعد ستون‌ها را عوض کنید و ببینید همان پنج جعبه چطور دوباره می‌نشینند. دکمه‌ی آخر مفیدترین سطر شبکه‌ای است که یاد می‌گیرید:

web-layout-grid-play.salam

واردسازی دام

صفحه:
    عنوان = "ستون‌ها را عوض کنید"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 16 پایان
    جعبه:
        نمایش = فلکس پیچش آرایش = پیچیده شکاف = 6 فضا پایین = 10
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("grid")، "grid-template-columns"، "1fr 1fr 1fr") دام.تنظیم متن(دام.با شناسه("code")، "1fr 1fr 1fr") پایان محتوا = "سه ستون برابر" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("grid")، "grid-template-columns"، "1fr 3fr") دام.تنظیم متن(دام.با شناسه("code")، "1fr 3fr") پایان محتوا = "1fr 3fr" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("grid")، "grid-template-columns"، "80px 1fr 80px") دام.تنظیم متن(دام.با شناسه("code")، "80px 1fr 80px") پایان محتوا = "دو کنار ثابت" پایان
        دکمه: کلیک = (): دام.تنظیم سبک(دام.با شناسه("grid")، "grid-template-columns"، "repeat(auto-fit, minmax(90px, 1fr))") دام.تنظیم متن(دام.با شناسه("code")، "repeat(auto-fit, minmax(90px, 1fr))") پایان محتوا = "auto-fit" پایان
    پایان
    پاراگراف: شناسه = "code" خانواده قلم = monospace فضا = "0 0 10" محتوا = "1fr 1fr 1fr" پایان
    جعبه:
        شناسه = "grid" نمایش = شبکه ستون های شبکه = "1fr 1fr 1fr" شکاف = 8
        جعبه: پس زمینه = "#fca5a5" فاصله = 14 محتوا = "A" پایان
        جعبه: پس زمینه = "#93c5fd" فاصله = 14 محتوا = "B" پایان
        جعبه: پس زمینه = "#86efac" فاصله = 14 محتوا = "C" پایان
        جعبه: پس زمینه = "#fcd34d" فاصله = 14 محتوا = "D" پایان
        جعبه: پس زمینه = "#c4b5fd" فاصله = 14 محتوا = "E" پایان
    پایان
پایان

repeat(auto-fit, minmax(90px, 1fr)) یعنی «هر تعداد ستون که جا شود بساز، هر کدام دست‌کم ۹۰ پیکسل، و جای باقی‌مانده را تقسیم کن». minmax(a, b) اندازه‌ای میان دو حد می‌دهد. با auto-fit ستون‌های خالی به صفر می‌رسند و ستون‌های واقعی کش می‌آیند. با auto-fill ستون‌های خالی می‌مانند و پهنایشان را نگه می‌دارند. شبکه‌ی کارتی که این‌طور ساخته شود بی‌هیچ پرس‌وجوی رسانه با هر صفحه‌ای سازگار می‌شود:

web-layout-autofit.salam

صفحه:
    عنوان = "شبکه‌ی کارت‌های واکنش‌گرا"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        نمایش = شبکه ستون های شبکه = "repeat(auto-fit, minmax(140px, 1fr))" شکاف = 12
        جعبه: پس زمینه = "#fecaca" فاصله = 24 گردی کادر = 8 محتوا = "یک" پایان
        جعبه: پس زمینه = "#fed7aa" فاصله = 24 گردی کادر = 8 محتوا = "دو" پایان
        جعبه: پس زمینه = "#fde68a" فاصله = 24 گردی کادر = 8 محتوا = "سه" پایان
        جعبه: پس زمینه = "#bbf7d0" فاصله = 24 گردی کادر = 8 محتوا = "چهار" پایان
        جعبه: پس زمینه = "#bae6fd" فاصله = 24 گردی کادر = 8 محتوا = "پنج" پایان
        جعبه: پس زمینه = "#ddd6fe" فاصله = 24 گردی کادر = 8 محتوا = "شش" پایان
    پایان
پایان

جا دادن عنصرها: خط‌ها، گستره‌ها و ناحیه‌ها

خط‌های شبکه از ۱ شماره می‌خورند: شبکه‌ای با سه ستون چهار خط عمودی دارد و -1 آخرین است. ستون شبکه و ردیف شبکه عنصر را میان دو خط می‌گذارند: "1 / 3" از خط ۱ تا خط ۳ است، یعنی دو ستون، و "span 2" یعنی دو ردیف یا ستون پهنا از هر جا که عنصر بیفتد. آغاز ستون شبکه، انتهای ستون شبکه، آغاز ردیف شبکه و انتهای ردیف شبکه دو سر را یکی‌یکی می‌گذارند. وقتی عنصرهای با اندازه‌های متفاوت حفره می‌گذارند، جریان خودکار شبکه = "row dense" آن‌ها را پر می‌کند، به قیمت ترتیبی که دیگر با کد جور نیست.

web-layout-grid-span.salam

صفحه:
    عنوان = "خانه‌های چندتایی"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        نمایش = شبکه ستون های شبکه = "repeat(4, 1fr)" ردیف‌های خودکار شبکه = 56 شکاف = 8
        جعبه: ستون شبکه = "1 / 3" پس زمینه = "#fca5a5" فاصله = 8 محتوا = "ستون ۱ تا ۲" پایان
        جعبه: ردیف شبکه = "span 2" پس زمینه = "#93c5fd" فاصله = 8 محتوا = "دو ردیف" پایان
        جعبه: آغاز ستون شبکه = 4 پس زمینه = "#86efac" فاصله = 8 محتوا = "ستون ۴" پایان
        جعبه: پس زمینه = "#fcd34d" فاصله = 8 محتوا = "خودکار" پایان
        جعبه: ستون شبکه = "span 2" پس زمینه = "#c4b5fd" فاصله = 8 محتوا = "گستره ۲" پایان
        جعبه: پس زمینه = "#f9a8d4" فاصله = 8 محتوا = "خودکار" پایان
    پایان
پایان

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

web-layout-grid-areas.salam

صفحه:
    عنوان = "صفحه با ناحیه‌های نام‌دار"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 0 پایان
    جعبه:
        نمایش = شبکه ستون های شبکه = "150px 1fr" ردیف‌ها الگو شبکه = "50px 1fr 40px" نواحی الگو شبکه = `"top top" "side main" "foot foot"` شکاف = 6 ارتفاع = 280 فاصله = 6
        سرصفحه: ناحیه شبکه = top پس زمینه = "#0f766e" رنگ = "white" فاصله = 12 محتوا = "بالا" پایان
        کناری: ناحیه شبکه = side پس زمینه = "#99f6e4" فاصله = 12 محتوا = "کنار" پایان
        اصلی: ناحیه شبکه = main پس زمینه = "#ccfbf1" فاصله = 12 محتوا = "اصلی" پایان
        پاورقی: ناحیه شبکه = foot پس زمینه = "#134e4a" رنگ = "white" فاصله = 10 محتوا = "پایین" پایان
    پایان
پایان

الگو شبکه کوتاه‌نویسی ردیف، ستون و ناحیه‌ها با هم است: `"top top" 50px "side main" 1fr / 150px 1fr`. ناحیه‌ها و اندازه‌ی ردیف‌ها با هم نوشته می‌شوند، بعد یک خط مورب، بعد اندازه‌ی ستون‌ها. شبکه بلندترین کوتاه‌نویسی است و ترک‌های خودکار و جریان را هم می‌گذارد، مثل "auto-flow 60px / 1fr 2fr". تازه‌کارها با نام‌های بلند راحت‌ترند؛ کوتاه‌نویسی‌ها برای خواندن کد دیگران‌اند.

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

ترازبندی در فلکس و شبکه

چند واژه‌ی یکسان همه‌جا هست و یک قاعده یادگرفتنشان را آسان می‌کند: justify در امتداد محور خطی کار می‌کند (جهتی که متن می‌رود)، align در امتداد محور بلوکی (جهتی که پاراگراف‌ها روی هم می‌نشینند)، content کل مجموعه‌ی ردیف‌ها یا ستون‌ها را درون ظرف می‌چیند، items همه‌ی عنصرها را درون خانه‌هایشان تراز می‌کند و self همین کار را برای یک عنصر می‌کند. place هر دو را با هم می‌گذارد. در فلکس justify همیشه محور اصلی است و align محور عرضی، و justify items و justify self روی عنصرهای فلکس اثری ندارند.

مقدارها start، end، center، stretch و برای content سه شکل space- هستند. واژه‌ی end در سلام عنصر را هم می‌بندد، پس وقتی مقدار است درون گیومه بنویسید: "end" (در فارسی انتها مشکلی ندارد). صفحه‌ی زیر عنصرها را درون خانه‌های شبکه نشان می‌دهد، با موارد جای‌گذاری (place items) روی ظرف و ترازی متفاوت روی بعضی عنصرها.

web-layout-grid-align.salam

صفحه:
    عنوان = "چیدن درون خانه‌ها"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = 20 پایان
    جعبه:
        نمایش = شبکه ستون های شبکه = "repeat(3, 1fr)" ردیف‌های خودکار شبکه = 90 شکاف = 8 موارد جای‌گذاری = وسط کادر = "2px dashed #94a3b8" فاصله = 8
        جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "وسط" پایان
        جعبه: خود چینش = آغاز پس زمینه = "#93c5fd" فاصله = 8 محتوا = "آغاز" پایان
        جعبه: خود چینش = "انتها" پس زمینه = "#86efac" فاصله = 8 محتوا = "انتها" پایان
        جعبه: خود تراز = آغاز پس زمینه = "#fcd34d" فاصله = 8 محتوا = "بالا" پایان
        جعبه: خود تراز = کشیده خود چینش = کشیده پس زمینه = "#c4b5fd" فاصله = 8 محتوا = "کشیده" پایان
        جعبه: خود جای‌گذاری = "انتها" پس زمینه = "#f9a8d4" فاصله = 8 محتوا = "جای‌گذاری خود" پایان
    پایان
پایان

متن چندستونی

پاراگراف بلند وقتی سطرهایش خیلی پهن باشند سخت خوانده می‌شود. چندستونی (columns) محتوای جعبه را به ستون‌های روزنامه‌ای می‌شکند که یکی پس از دیگری پر می‌شوند. تعداد ستون را برای شمار ثابت بگذارید، یا عرض ستون را برای پهنای دلخواه و بگذارید مرورگر تصمیم بگیرد چند تا جا می‌شود. چندستونی = "10rem 3" هر دو را می‌گوید: دست‌کم ۱۰rem پهنا، حداکثر ۳ ستون. شکاف ستون فاصله‌ی میان آن‌ها است و خط جداکننده ستون (column rule) وسط شکاف خطی می‌کشد که مثل کادر نوشته می‌شود؛ اجزایش ضخامت خط ستون، سبک خط ستون و رنگ خط ستون هستند، و سبک را باید بگذارید وگرنه چیزی دیده نمی‌شود.

web-layout-columns.salam

صفحه:
    عنوان = "ستون‌های روزنامه‌ای"
    سراسری: اندازه جعبه = "border-box" پایان
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, serif" فضا = 20 پایان
    جعبه:
        چندستونی = "10rem 3" شکاف ستون = 28 خط جداکننده ستون = "1px solid #94a3b8" ارتفاع خط = 1.5
        سرتیتر: اندازه = 2 گستره ستون = همه فضا = "0 0 10" محتوا = "خبرهای بندر" پایان
        پاراگراف: فضا = "0 0 10" محتوا = "کشتی مسافربری دوشنبه پس از یک ماه تعمیر به برنامه‌ی تابستانی‌اش برگشت. مسافران در نخستین سفر همه‌ی صندلی‌ها را پر کردند." پایان
        پاراگراف: فضا = "0 0 10" محتوا = "ماهیگیران از صید خوب ماهی خبر می‌دهند و بازار برای رسیدن به تقاضا یک ساعت زودتر باز شد." پایان
        پاراگراف: شکستن درون = پرهیز فضا = "0 0 10" محتوا = "فانوس‌بان شنبه درباره‌ی تاریخ بندر سخنرانی می‌کند. ورود آزاد است." پایان
        پاراگراف: فضا = "0 0 10" محتوا = "یکشنبه باران می‌بارد و عصر هوا باز می‌شود." پایان
    پایان
پایان

فرزندی با گستره ستون = همه در پهنای همه‌ی ستون‌ها کش می‌آید، مثل سرتیتر بالا. پرکردن ستون میان ستون‌های متوازن (پیش‌فرض) و پر کردن یک ستون تا ارتفاع جعبه پیش از شروع ستون بعد انتخاب می‌کند. ویژگی‌های شکستن جای پایان ستون را تعیین می‌کنند: شکستن درون = پرهیز کارتی را یک‌تکه نگه می‌دارد، شکستن پس از = پرهیز سرتیتر را با پاراگراف بعدش می‌ماند، و شکستن پیش از = ستونی ستون تازه را اجباری می‌کند. همین ویژگی‌ها هنگام چاپ جای شکستن صفحه را هم تعیین می‌کنند.

عدد تنها به‌عنوان مقدار چندستونی پیکسل خوانده می‌شود، پس چندستونی = "3" سه ستون نیست. برای شمار ستون تعداد ستون = 3 بنویسید.

صفحه‌های راست‌به‌چپ

فلکس و شبکه جهت صفحه را خودشان دنبال می‌کنند. در صفحه‌ی فارسی ردیف از راست شروع می‌شود، نخستین ستون شبکه ستون راست است و flex-start و start لبه‌ی راست را می‌گویند. همان کد تصویر آینه‌ای صفحه‌ی انگلیسی را می‌دهد، که خواننده‌ی فارسی انتظارش را دارد. لازم نیست چیزی را عوض کنید.

تله در نام‌های فیزیکی است: چپ، راست، فضا چپ، شناوری = چپ و تراز متن = چپ هرگز برعکس نمی‌شوند. هر جا سو به ترتیب خواندن مربوط است (نشانی در انتهای سطر، فاصله بعد از یک نماد، متنی که دور عکس می‌پیچد) از نام‌های منطقی استفاده کنید: فاصله از لبه خطی آغاز و انتها، فضا ابتدا و فضا انتها، شناوری = inline-start، تراز متن = آغاز. نمونه‌های این درس از قبل همین کار را می‌کنند. چپ و راست را فقط وقتی به کار ببرید که مقصودتان خود صفحه‌ی نمایش است، مثل سایه‌ای که به راست می‌افتد.

مرجع: همه‌ی ویژگی‌های چیدمان

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

موقعیت و فاصله از لبه‌ها

چیدن جعبه، فاصله‌اش از لبه‌ها و ترتیب لایه‌ها.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`موقعیت` position position	چیدن عنصر در صفحه. `static` (ایستا، پیش‌فرض) همان جریان عادی است. `relative` (نسبی) جای خودش را در جریان نگه می‌دارد و با فاصله‌ها کمی جابه‌جا می‌شود. `absolute` (مطلق) از جریان بیرون می‌رود و نسبت به نزدیک‌ترین والد موقعیت‌دار چیده می‌شود. `fixed` (ثابت) نسبت به پنجره چیده می‌شود و با پیمایش صفحه سر جایش می‌ماند. `sticky` (چسبان) تا رسیدن به فاصله‌اش عادی پیمایش می‌شود و بعد می‌چسبد. [static, relative, absolute, fixed, sticky]	`جعبه: موقعیت = نسبی بالا = 10 چپ = 20 پس زمینه = "#bfdbfe" فاصله = 12 محتوا = "۱۰ پایین و ۲۰ به راست رفته" پایان`
`بالا` top top	فاصله از لبه‌ی بالای جعبه‌ی مرجع: برای `relative` جای خود عنصر، برای `absolute` نزدیک‌ترین والد موقعیت‌دار و برای `fixed` پنجره. عدد یعنی پیکسل. درصد و `auto` هم کار می‌کنند. روی عنصر `static` اثری ندارد. [length / percentage / auto]	`جعبه: موقعیت = نسبی ارتفاع = 70 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق بالا = 8 چپ = 8 پس زمینه = "#fca5a5" فاصله = 6 محتوا = "۸ پیکسل از بالا" پایان پایان`
`راست` right right	فاصله از لبه‌ی راست جعبه‌ی مرجع، با همان قاعده‌های `top`. این یک سوی فیزیکی است و در صفحه‌ی راست‌به‌چپ برعکس نمی‌شود. اگر سو باید جهت متن را دنبال کند از `inset inline end` (فاصله از لبه خطی انتها) استفاده کنید. [length / percentage / auto]	`جعبه: موقعیت = نسبی ارتفاع = 70 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق بالا = 8 راست = 8 پس زمینه = "#fca5a5" فاصله = 6 محتوا = "۸ پیکسل از راست" پایان پایان`
`پایین` bottom bottom	فاصله از لبه‌ی پایین جعبه‌ی مرجع، با همان قاعده‌های `top`. اگر عنصر ارتفاع نداشته باشد، `top` و `bottom` با هم آن را میان دو لبه می‌کشند. [length / percentage / auto]	`جعبه: موقعیت = نسبی ارتفاع = 70 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق پایین = 0 چپ = 0 راست = 0 پس زمینه = "#93c5fd" فاصله = 6 محتوا = "نواری روی لبه‌ی پایین" پایان پایان`
`چپ` left left	فاصله از لبه‌ی چپ جعبه‌ی مرجع، با همان قاعده‌های `top`. این هم سوی فیزیکی است. دو فاصله‌ی روبه‌رو مثل `left` و `right` با هم، عنصر مطلق را در پهنای والدش می‌کشند. [length / percentage / auto]	`جعبه: موقعیت = نسبی ارتفاع = 70 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق بالا = 8 چپ = 24 پس زمینه = "#fca5a5" فاصله = 6 محتوا = "۲۴ پیکسل از چپ" پایان پایان`
`فاصله از لبه` inset inset	کوتاه‌نویسی `top`، `right`، `bottom` و `left` در یک مقدار، با حداکثر چهار عدد به ترتیب `margin`. با `inset = 0` جعبه‌ی مطلق همه‌ی جعبه‌ی مرجعش را می‌پوشاند. [length / percentage / auto; up to 4 values]	`جعبه: موقعیت = نسبی ارتفاع = 80 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق فاصله از لبه = "10 40" پس زمینه = "#86efac" محتوا = "۱۰ پیکسل بالا و پایین، ۴۰ پیکسل کنارها" پایان پایان`
`فاصله از لبه بلوکی` inset block inset-block	فاصله‌های منطقی محور بلوکی (در نوشتار افقی بالا و پایین) در یک ویژگی، با یک یا دو مقدار: اول سوی آغاز و بعد سوی انتها. [length / percentage / auto; up to 2 values]	`جعبه: موقعیت = نسبی ارتفاع = 90 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق فاصله از لبه بلوکی = "10 30" پس زمینه = "#86efac" محتوا = "۱۰ پیکسل از آغاز، ۳۰ پیکسل از انتها" پایان پایان`
`فاصله از لبه بلوکی آغاز` inset block start inset-block-start	فاصله از لبه‌ی آغاز محور بلوکی، که در متن افقی معمولی بالاست. شکل منطقی `top` است. [length / percentage / auto]	`جعبه: موقعیت = نسبی ارتفاع = 70 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق فاصله از لبه بلوکی آغاز = 12 پس زمینه = "#fca5a5" فاصله = 6 محتوا = "۱۲ پیکسل از آغاز بلوک" پایان پایان`
`فاصله از لبه بلوکی انتها` inset block end inset-block-end	فاصله از لبه‌ی انتهای محور بلوکی، که در متن افقی معمولی پایین است. شکل منطقی `bottom` است. [length / percentage / auto]	`جعبه: موقعیت = نسبی ارتفاع = 70 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق فاصله از لبه بلوکی انتها = 12 پس زمینه = "#fca5a5" فاصله = 6 محتوا = "۱۲ پیکسل از انتهای بلوک" پایان پایان`
`فاصله از لبه خطی` inset inline inset-inline	فاصله‌های منطقی محور خطی (جهتی که متن می‌رود) در یک ویژگی، با یک یا دو مقدار: اول سوی آغاز و بعد سوی انتها. در صفحه‌ی انگلیسی آغاز چپ است و در صفحه‌ی فارسی راست. [length / percentage / auto; up to 2 values]	`جعبه: موقعیت = نسبی ارتفاع = 70 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق بالا = 10 فاصله از لبه خطی = "20 60" پس زمینه = "#86efac" فاصله = 6 محتوا = "۲۰ پیکسل در آغاز، ۶۰ در انتها" پایان پایان`
`فاصله از لبه خطی آغاز` inset inline start inset-inline-start	فاصله از لبه‌ی آغاز محور خطی: لبه‌ی چپ در صفحه‌ی چپ‌به‌راست و لبه‌ی راست در صفحه‌ی راست‌به‌چپ. شکل منطقی `left` است. [length / percentage / auto]	`جعبه: موقعیت = نسبی ارتفاع = 70 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق بالا = 10 فاصله از لبه خطی آغاز = 16 پس زمینه = "#fca5a5" فاصله = 6 محتوا = "۱۶ پیکسل از آغاز" پایان پایان`
`فاصله از لبه خطی انتها` inset inline end inset-inline-end	فاصله از لبه‌ی انتهای محور خطی: لبه‌ی راست در صفحه‌ی چپ‌به‌راست و لبه‌ی چپ در صفحه‌ی راست‌به‌چپ. شکل منطقی `right` است و و برای نشان گوشه‌ی کارت انتخاب درستی است. [length / percentage / auto]	`جعبه: موقعیت = نسبی ارتفاع = 70 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق بالا = 10 فاصله از لبه خطی انتها = 16 پس زمینه = "#fca5a5" فاصله = 6 محتوا = "۱۶ پیکسل از انتها" پایان پایان`
`ترتیب لایه` z index z-index	ترتیب لایه‌های عنصرهای روی هم، به شکل یک عدد صحیح. عدد بزرگ‌تر بالاتر کشیده می‌شود و عدد منفی پشت می‌رود. روی عنصرهای موقعیت‌دار و روی عنصرهای فلکس و شبکه کار می‌کند. پیش‌فرض `auto` است. [integer / auto]	`جعبه: موقعیت = نسبی ارتفاع = 90 پس زمینه = "#e2e8f0" جعبه: موقعیت = مطلق بالا = 0 چپ = 0 عرض = 90 ارتفاع = 60 پس زمینه = "#fca5a5" ترتیب لایه = 2 محتوا = "روی" پایان جعبه: موقعیت = مطلق بالا = 20 چپ = 40 عرض = 90 ارتفاع = 60 پس زمینه = "#93c5fd" ترتیب لایه = 1 پایان پایان`

شناوری

پیچیدن متن دور یک جعبه.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`شناوری` float float	عنصر را از سطر عادی بیرون می‌برد و به یک سو می‌چسباند تا متن دورش بپیچد. مقدارها: `left`، `right`، `inline-start`، `inline-end` و `none`. برای گذاشتن عکس میان یک پاراگراف به کار می‌آید، نه برای چیدن صفحه. [left, right, none, inline-start, inline-end]	`جعبه: شناوری = inline-end عرض = 80 ارتفاع = 60 پس زمینه = "#fcd34d" فضا = 6 محتوا = "شناور" پایان پاراگراف: محتوا = "متن در کنار جعبه‌ی شناور دور آن می‌پیچد و وقتی جعبه تمام شد زیر آن ادامه می‌یابد." پایان`
`پاک‌سازی شناوری` clear clear	عنصر را وادار می‌کند زیر جعبه‌های شناور شروع شود و کنارشان نپیچد. مقدارها: `left`، `right`، `both` (هر دو سو، انتخاب معمول)، `inline-start`، `inline-end` و `none`. [left, right, both, none, inline-start, inline-end]	`جعبه: پاک‌سازی شناوری = دوسو پس زمینه = "#e2e8f0" فاصله = 8 محتوا = "من زیر هر جعبه‌ی شناور شروع می‌شوم" پایان`

فلکس

جهت، پیچش و اندازه‌ی عنصرهای فلکس. نمایش = فلکس را روی والد بگذارید.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`فلکس` flex flex	کوتاه‌نویسی `flex grow`، `flex shrink` و `flex basis` برای عنصر فلکس. یک عدد مثل `1` یعنی «از صفر شروع کن و برابر رشد کن». `"0 0 160px"` یک عنصر ثابت ۱۶۰ پیکسلی است. کلیدواژه‌های `auto` (برابر `1 1 auto`) و `none` (برابر `0 0 auto`) هم پذیرفته می‌شوند. [CSS-wide keywords only]	`جعبه: نمایش = فلکس شکاف = 8 جعبه: فلکس = "0 0 100px" پس زمینه = "#fcd34d" فاصله = 8 محتوا = "ثابت" پایان جعبه: فلکس = 1 پس زمینه = "#c4b5fd" فاصله = 8 محتوا = "بقیه را می‌گیرد" پایان پایان`
`جهت فلکس` flex direction flex-direction	جهت محور اصلی ظرف فلکس. `row` (ردیفی، پیش‌فرض) در جهت متن می‌رود، `column` (ستونی) از بالا به پایین، و `row-reverse` و `column-reverse` وارونه‌ی آن‌ها. [row, row-reverse, column, column-reverse]	`جعبه: نمایش = فلکس جهت فلکس = ستونی شکاف = 6 جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "اول" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "دوم" پایان پایان`
`پیچش آرایش` flex wrap flex-wrap	اینکه عنصرهای فلکس در یک سطر بمانند یا وقتی جا نشدند به سطر بعد بروند. `nowrap` (پیش‌فرض) فشرده‌شان می‌کند، `wrap` سطر تازه می‌سازد و `wrap-reverse` سطرها را رو به بالا اضافه می‌کند. [nowrap, wrap, wrap-reverse]	`جعبه: نمایش = فلکس پیچش آرایش = پیچیده شکاف = 6 عرض = 220 جعبه: عرض = 90 پس زمینه = "#fca5a5" فاصله = 8 محتوا = "یک" پایان جعبه: عرض = 90 پس زمینه = "#93c5fd" فاصله = 8 محتوا = "دو" پایان جعبه: عرض = 90 پس زمینه = "#86efac" فاصله = 8 محتوا = "سه" پایان پایان`
`جریان فلکس` flex flow flex-flow	کوتاه‌نویسی `flex direction` و `flex wrap` در یک مقدار، مثلاً `"column wrap"`. [CSS-wide keywords only]	`جعبه: نمایش = فلکس جریان فلکس = "row wrap" شکاف = 6 عرض = 220 جعبه: عرض = 90 پس زمینه = "#fcd34d" فاصله = 8 محتوا = "الف" پایان جعبه: عرض = 90 پس زمینه = "#bbf7d0" فاصله = 8 محتوا = "ب" پایان جعبه: عرض = 90 پس زمینه = "#bae6fd" فاصله = 8 محتوا = "پ" پایان پایان`
`رشد فلکس` flex grow flex-grow	سهم این عنصر از جای خالی سطر، نسبت به عنصرهای دیگر. پیش‌فرض ۰ است (رشد نکن). عنصرهایی با ۱ و ۲ و ۱ جای خالی را به نسبت ۱ به ۲ به ۱ بین خود تقسیم می‌کنند. [number]	`جعبه: نمایش = فلکس شکاف = 6 جعبه: رشد فلکس = 1 پس زمینه = "#fca5a5" فاصله = 8 محتوا = "1" پایان جعبه: رشد فلکس = 3 پس زمینه = "#93c5fd" فاصله = 8 محتوا = "3" پایان پایان`
`جمع‌شدن فلکس` flex shrink flex-shrink	وقتی مجموع عنصرها از ظرف پهن‌تر است، این عنصر چقدر کوچک شود. پیش‌فرض ۱ است. با `0` عنصر اندازه‌اش را نگه می‌دارد و ممکن است بیرون بزند. [number]	`جعبه: نمایش = فلکس عرض = 240 جعبه: جمع‌شدن فلکس = 0 عرض = 160 پس زمینه = "#fcd34d" فاصله = 8 محتوا = "هرگز کوچک نمی‌شود" پایان جعبه: عرض = 160 پس زمینه = "#c4b5fd" فاصله = 8 محتوا = "کوچک می‌شود" پایان پایان`
`پایه فلکس` flex basis flex-basis	اندازه‌ی آغازین عنصر در امتداد محور اصلی، پیش از رشد یا جمع‌شدن. طول، درصد، `auto` (از عرض بخوان) یا `content` می‌پذیرد. [length / percentage / auto, content, min-content, max-content, fit-content]	`جعبه: نمایش = فلکس شکاف = 6 جعبه: پایه فلکس = 120 پس زمینه = "#fcd34d" فاصله = 8 محتوا = "پایه ۱۲۰" پایان جعبه: پایه فلکس = "30%" پس زمینه = "#bbf7d0" فاصله = 8 محتوا = "پایه ۳۰٪" پایان پایان`
`ترتیب نمایش` order order	جای دیداری عنصر فلکس یا شبکه، به شکل یک عدد صحیح. عنصرها از کوچک‌ترین تا بزرگ‌ترین چیده می‌شوند و عنصرهای هم‌عدد ترتیب کدشان را نگه می‌دارند. پیش‌فرض ۰ است. تمرکز صفحه‌کلید همچنان ترتیب کد را می‌رود، پس برای جابه‌جا کردن محتوای مهم از آن استفاده نکنید. [integer]	`جعبه: نمایش = فلکس شکاف = 6 جعبه: ترتیب نمایش = 2 پس زمینه = "#fca5a5" فاصله = 8 محتوا = "الف (ترتیب ۲)" پایان جعبه: ترتیب نمایش = 1 پس زمینه = "#93c5fd" فاصله = 8 محتوا = "ب (ترتیب ۱)" پایان پایان`

ترازبندی و شکاف

بیشتر این‌ها هم در فلکس کار می‌کنند و هم در شبکه. justify items و justify self فقط برای شبکه‌اند.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`چینش` justify content justify-content	عنصرها را در امتداد محور اصلی (محور خطی در شبکه) می‌چیند وقتی جای خالی هست. مقدارها: `flex-start`، `flex-end`، `center`، `space-between` (فاصله‌های برابر میان عنصرها و بدون فاصله در دو سر)، `space-around`، `space-evenly` و `stretch`. [normal, start, end, center, flex-start, flex-end, ...]	`جعبه: نمایش = فلکس چینش = "فاصله میان" پس زمینه = "#e2e8f0" فاصله = 8 جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "اول" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "میانه" پایان جعبه: پس زمینه = "#86efac" فاصله = 8 محتوا = "آخر" پایان پایان`
`ترازعمودی` align items align-items	عنصرها را در محور عرضی ظرف فلکس (و محور بلوکی در شبکه) می‌چیند. `stretch` پیش‌فرض است و عنصرها را به اندازه‌ی سطر می‌کشد. `flex-start`، `flex-end`، `center` و `baseline` بدون کشیدن ترازشان می‌کنند. [normal, stretch, center, start, end, flex-start, ...]	`جعبه: نمایش = فلکس ترازعمودی = وسط ارتفاع = 90 پس زمینه = "#e2e8f0" شکاف = 6 جعبه: پس زمینه = "#fca5a5" فاصله = "6 10" محتوا = "کوتاه" پایان جعبه: پس زمینه = "#93c5fd" فاصله = "24 10" محتوا = "بلند" پایان پایان`
`محتوا تراز` align content align-content	سطرهای ظرفی را که بیش از یک سطر دارد (فلکس پیچیده، شبکه‌ای بلندتر از ردیف‌هایش) در محور عرضی پخش می‌کند. روی یک سطر اثری ندارد. مقدارها مثل `justify content` هستند: `flex-start`، `center`، `space-between` و مانند آن. [normal, start, end, center, flex-start, flex-end, ...]	`جعبه: نمایش = فلکس پیچش آرایش = پیچیده محتوا تراز = "آغاز فلکس" ارتفاع = 120 عرض = 200 پس زمینه = "#e2e8f0" شکاف = 6 جعبه: عرض = 90 ارتفاع = 30 پس زمینه = "#fca5a5" محتوا = "الف" پایان جعبه: عرض = 90 ارتفاع = 30 پس زمینه = "#93c5fd" محتوا = "ب" پایان جعبه: عرض = 90 ارتفاع = 30 پس زمینه = "#86efac" محتوا = "پ" پایان پایان`
`خود تراز` align self align-self	`align items` را برای یک عنصر عوض می‌کند. `auto` (پیش‌فرض) از ظرف پیروی می‌کند. مقدارهای دیگر: `flex-start`، `flex-end`، `center`، `stretch` و `baseline`. [auto, normal, stretch, center, start, end, ...]	`جعبه: نمایش = فلکس ارتفاع = 90 پس زمینه = "#e2e8f0" شکاف = 6 جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "پیش‌فرض" پایان جعبه: خود تراز = "انتهای فلکس" پس زمینه = "#93c5fd" فاصله = 8 محتوا = "خودش در انتها" پایان پایان`
`موارد چینش` justify items justify-items	در شبکه همه‌ی عنصرها را در محور خطی درون خانه‌ی خودشان می‌چیند. `stretch` (پیش‌فرض شبکه) خانه را پر می‌کند و `start`، `end` و `center` عنصر را کوچک می‌کنند و جابه‌جایش می‌کنند. در ظرف فلکس اثری ندارد. [normal, stretch, center, start, end, flex-start, ...]	`جعبه: نمایش = شبکه ستون های شبکه = "1fr 1fr" موارد چینش = وسط شکاف = 6 پس زمینه = "#e2e8f0" جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "وسط" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "درون خانه‌اش" پایان پایان`
`خود چینش` justify self justify-self	در شبکه یک عنصر را در محور خطی درون خانه‌اش می‌چیند و `justify items` را برای آن عوض می‌کند. مقدارها: `auto`، `start`، `end`، `center` و `stretch`. [auto, normal, stretch, center, start, end, ...]	`جعبه: نمایش = شبکه ستون های شبکه = "1fr 1fr" شکاف = 6 پس زمینه = "#e2e8f0" جعبه: خود چینش = "انتها" پس زمینه = "#fca5a5" فاصله = 8 محتوا = "انتهای خانه‌اش" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "پیش‌فرض" پایان پایان`
`محتوا جای‌گذاری` place content place-content	کوتاه‌نویسی `align content` و بعد `justify content`. یک مقدار هر دو را تعیین می‌کند. کل مجموعه‌ی ردیف‌ها و ستون‌ها را درون ظرف جا می‌دهد. [normal, stretch, center, start, end, flex-start, ...; up to 2 values]	`جعبه: نمایش = شبکه محتوا جای‌گذاری = وسط ارتفاع = 100 پس زمینه = "#e2e8f0" جعبه: پس زمینه = "#fca5a5" فاصله = 10 محتوا = "در میانه" پایان پایان`
`موارد جای‌گذاری` place items place-items	کوتاه‌نویسی `align items` و بعد `justify items`. یک مقدار هر دو را تعیین می‌کند، پس `place items = center` همه‌ی عنصرها را در خانه‌شان وسط می‌گذارد. [normal, stretch, center, start, end, flex-start, ...; up to 2 values]	`جعبه: نمایش = شبکه ستون های شبکه = "1fr 1fr" ردیف‌های خودکار شبکه = 70 موارد جای‌گذاری = وسط شکاف = 6 پس زمینه = "#e2e8f0" جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "یک" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "دو" پایان پایان`
`خود جای‌گذاری` place self place-self	کوتاه‌نویسی `align self` و بعد `justify self` برای یک عنصر شبکه. یک مقدار هر دو را تعیین می‌کند. [auto, normal, stretch, center, start, end, ...; up to 2 values]	`جعبه: نمایش = شبکه ستون های شبکه = "1fr 1fr" ردیف‌های خودکار شبکه = 70 شکاف = 6 پس زمینه = "#e2e8f0" جعبه: خود جای‌گذاری = وسط پس زمینه = "#fca5a5" فاصله = 8 محتوا = "وسط" پایان جعبه: پس زمینه = "#93c5fd" محتوا = "خانه را پر می‌کند" پایان پایان`
`شکاف` gap gap	فاصله‌ی میان عنصرهای ظرف فلکس یا شبکه (و میان ستون‌های جعبه‌ی چندستونی). یک مقدار برای هر دو سو به کار می‌رود، و دو مقدار یعنی اول فاصله‌ی ردیف‌ها و بعد ستون‌ها، مثل `"8 16"`. عدد یعنی پیکسل. [length / percentage / normal; up to 2 values]	`جعبه: نمایش = فلکس شکاف = "8 20" پیچش آرایش = پیچیده عرض = 200 جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "یک" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "دو" پایان جعبه: پس زمینه = "#86efac" فاصله = 8 محتوا = "سه" پایان پایان`
`شکاف ردیف` row gap row-gap	فاصله‌ی میان ردیف‌ها، در شبکه یا ظرف فلکس پیچنده. همراه `column gap` شکل بلند `gap` است. [length / percentage / normal]	`جعبه: نمایش = شبکه ستون های شبکه = "1fr 1fr" شکاف ردیف = 20 جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "الف" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "ب" پایان جعبه: پس زمینه = "#86efac" فاصله = 8 محتوا = "پ" پایان جعبه: پس زمینه = "#fcd34d" فاصله = 8 محتوا = "ت" پایان پایان`

شبکه

ردیف و ستون، ناحیه‌ها و جا دادن عنصرها. نمایش = شبکه را روی والد بگذارید.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`شبکه` grid grid	کوتاه‌نویسی شبکه. ردیف‌ها و ستون‌ها را در یک مقدار می‌گذارد، مثلاً `"auto-flow / 1fr 1fr"` (ردیف‌ها به اندازه‌ی نیاز ساخته می‌شوند و دو ستون برابر)، یا مانند `grid template` با ناحیه‌ها و یک خط مورب میان ردیف‌ها و ستون‌ها. [track lists, area strings, auto-flow/dense; up to one /]	`جعبه: نمایش = شبکه شبکه = "auto-flow 60px / 1fr 2fr" شکاف = 6 جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "باریک" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "پهن" پایان جعبه: پس زمینه = "#86efac" فاصله = 8 محتوا = "باریک" پایان جعبه: پس زمینه = "#fcd34d" فاصله = 8 محتوا = "پهن" پایان پایان`
`الگو شبکه` grid template grid-template	کوتاه‌نویسی `grid template rows`، `grid template columns` و `grid template areas`. رشته‌های ناحیه را بنویسید و بعد از هر کدام اندازه‌اش را، سپس یک خط مورب و اندازه‌ی ستون‌ها. [area strings, track sizes and line names; up to one /]	جعبه: نمایش = شبکه الگو شبکه = `"title title" 40px "menu body" 60px / 90px 1fr` شکاف = 6 جعبه: ناحیه شبکه = title پس زمینه = "#fca5a5" محتوا = "عنوان" پایان جعبه: ناحیه شبکه = menu پس زمینه = "#93c5fd" محتوا = "فهرست" پایان جعبه: ناحیه شبکه = body پس زمینه = "#86efac" محتوا = "متن" پایان پایان
`ستون های شبکه` grid template columns grid-template-columns	اندازه‌ی ستون‌ها، یک مقدار برای هر ستون. طول، درصد، کسر مثل `1fr` (یک سهم از جای خالی)، `auto` و تابع‌های `repeat(3, 1fr)` و `minmax(120px, 1fr)`. عدد تنها یعنی پیکسل. [length / percentage / fraction; up to 999 values]	`جعبه: نمایش = شبکه ستون های شبکه = "80px 1fr 2fr" شکاف = 6 جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "80px" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "1fr" پایان جعبه: پس زمینه = "#86efac" فاصله = 8 محتوا = "2fr" پایان پایان`
`ردیف‌ها الگو شبکه` grid template rows grid-template-rows	ارتفاع ردیف‌ها، مثل ستون‌ها نوشته می‌شود. ردیف‌هایی که نوشته نشده‌اند در صورت نیاز ساخته می‌شوند و اندازه‌شان را `grid auto rows` تعیین می‌کند. [length / percentage / fraction; up to 999 values]	`جعبه: نمایش = شبکه ردیف‌ها الگو شبکه = "40px 1fr" ارتفاع = 120 شکاف = 6 جعبه: پس زمینه = "#fca5a5" محتوا = "40px" پایان جعبه: پس زمینه = "#93c5fd" محتوا = "بقیه" پایان پایان`
`نواحی الگو شبکه` grid template areas grid-template-areas	به خانه‌های شبکه نام می‌دهد. یک رشته بنویسید که برای هر ردیف شبکه یک بخش در گیومه دارد و هر بخش به شمار ستون‌ها نام. دور آن پشت‌گیومه (بک‌تیک) بگذارید تا گیومه‌های درونی نیاز به گریز نداشته باشند، آن را در یک سطر نگه دارید و برای یکی کردن چند خانه یک نام را تکرار کنید. نقطه (`.`) خانه را خالی می‌گذارد. عنصرها جایشان را با `grid area` انتخاب می‌کنند. [string; up to 99 values]	جعبه: نمایش = شبکه ستون های شبکه = "70px 1fr" نواحی الگو شبکه = `"head head" "nav main"` شکاف = 6 جعبه: ناحیه شبکه = head پس زمینه = "#fca5a5" فاصله = 6 محتوا = "سر" پایان جعبه: ناحیه شبکه = nav پس زمینه = "#93c5fd" فاصله = 6 محتوا = "ناوبری" پایان جعبه: ناحیه شبکه = main پس زمینه = "#86efac" فاصله = 6 محتوا = "اصلی" پایان پایان
`جریان خودکار شبکه` grid auto flow grid-auto-flow	عنصرهایی که جای مشخصی ندارند چطور در شبکه گذاشته شوند. `row` (پیش‌فرض) ردیف به ردیف پر می‌کند، `column` ستون به ستون، و `dense` حفره‌های مانده از عنصرهای بزرگ را پر می‌کند، حتی اگر ترتیب دیداری عوض شود. [row, column, dense; up to 2 values]	`جعبه: نمایش = شبکه ستون های شبکه = "repeat(3, 1fr)" جریان خودکار شبکه = "row dense" شکاف = 6 جعبه: ستون شبکه = "span 2" پس زمینه = "#fca5a5" فاصله = 8 محتوا = "پهن" پایان جعبه: ستون شبکه = "span 2" پس زمینه = "#93c5fd" فاصله = 8 محتوا = "پهن" پایان جعبه: پس زمینه = "#86efac" فاصله = 8 محتوا = "حفره را پر می‌کند" پایان پایان`
`ستون‌های خودکار شبکه` grid auto columns grid-auto-columns	اندازه‌ی ستون‌هایی که خودکار ساخته می‌شوند، برای عنصرهایی که بیرون از ستون‌های `grid template columns` می‌افتند یا وقتی `grid auto flow = column` است. [length / percentage / fraction; up to 99 values]	`جعبه: نمایش = شبکه جریان خودکار شبکه = ستونی ستون‌های خودکار شبکه = 70 شکاف = 6 جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "الف" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "ب" پایان جعبه: پس زمینه = "#86efac" فاصله = 8 محتوا = "پ" پایان پایان`
`ردیف‌های خودکار شبکه` grid auto rows grid-auto-rows	اندازه‌ی ردیف‌هایی که خودکار ساخته می‌شوند. `minmax(60px, auto)` به هر ردیف دست‌کم ۶۰ پیکسل می‌دهد و می‌گذارد با محتوا بزرگ شود. [length / percentage / fraction; up to 99 values]	`جعبه: نمایش = شبکه ستون های شبکه = "1fr 1fr" ردیف‌های خودکار شبکه = "minmax(50px, auto)" شکاف = 6 جعبه: پس زمینه = "#fca5a5" فاصله = 8 محتوا = "الف" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "ب" پایان جعبه: پس زمینه = "#86efac" فاصله = 8 محتوا = "پ" پایان پایان`
`ستون شبکه` grid column grid-column	کوتاه‌نویسی `grid column start` و `grid column end` با یک خط مورب: `"1 / 3"` از خط ۱ تا خط ۳ می‌رود (دو ستون). `"span 2"` از جایی که عنصر می‌افتد دو ستون می‌گیرد. `"1 / -1"` سرتاسر می‌رود. [integer / name; up to 3 values]	`جعبه: نمایش = شبکه ستون های شبکه = "repeat(3, 1fr)" شکاف = 6 جعبه: ستون شبکه = "1 / 3" پس زمینه = "#fca5a5" فاصله = 8 محتوا = "خط ۱ تا ۳" پایان جعبه: پس زمینه = "#93c5fd" فاصله = 8 محتوا = "یک" پایان پایان`
`آغاز ستون شبکه` grid column start grid-column-start	خط شبکه‌ای که عنصر در جهت ستون از آن شروع می‌شود. خط‌ها از ۱ شمرده می‌شوند، یعنی از لبه‌ی آغاز نخستین ستون. عدد، نام یا `span 2` می‌گیرد. [integer / name / auto, span; up to 2 values]	`جعبه: نمایش = شبکه ستون های شبکه = "repeat(3, 1fr)" شکاف = 6 جعبه: آغاز ستون شبکه = 2 پس زمینه = "#fca5a5" فاصله = 8 محتوا = "از خط ۲ شروع می‌شود" پایان پایان`
`انتهای ستون شبکه` grid column end grid-column-end	خط شبکه‌ای که عنصر در جهت ستون در آن تمام می‌شود. `"span 2"` یعنی «دو ستون بعد از آغاز» و `-1` آخرین خط است. [integer / name / auto, span; up to 2 values]	`جعبه: نمایش = شبکه ستون های شبکه = "repeat(3, 1fr)" شکاف = 6 جعبه: انتهای ستون شبکه = "span 2" پس زمینه = "#fca5a5" فاصله = 8 محتوا = "دو ستون" پایان پایان`
`ردیف شبکه` grid row grid-row	کوتاه‌نویسی `grid row start` و `grid row end` مثل `grid column`: با `"span 2"` عنصر دو ردیف بلند می‌شود. [integer / name; up to 3 values]	`جعبه: نمایش = شبکه ستون های شبکه = "1fr 1fr" ردیف‌های خودکار شبکه = 40 شکاف = 6 جعبه: ردیف شبکه = "span 2" پس زمینه = "#fca5a5" فاصله = 8 محتوا = "دو ردیف بلند" پایان جعبه: پس زمینه = "#93c5fd" محتوا = "ب" پایان جعبه: پس زمینه = "#86efac" محتوا = "پ" پایان پایان`
`آغاز ردیف شبکه` grid row start grid-row-start	خط شبکه‌ای که عنصر در جهت ردیف از آن شروع می‌شود، از ۱ در بالا شمرده می‌شود. [integer / name / auto, span; up to 2 values]	`جعبه: نمایش = شبکه ستون های شبکه = "1fr 1fr" ردیف‌های خودکار شبکه = 40 شکاف = 6 جعبه: آغاز ردیف شبکه = 2 پس زمینه = "#fca5a5" فاصله = 8 محتوا = "از ردیف ۲ شروع می‌شود" پایان پایان`
`انتهای ردیف شبکه` grid row end grid-row-end	خط شبکه‌ای که عنصر در جهت ردیف در آن تمام می‌شود. `"span 3"` یعنی سه ردیف بعد از آغاز. [integer / name / auto, span; up to 2 values]	`جعبه: نمایش = شبکه ستون های شبکه = "1fr 1fr" ردیف‌های خودکار شبکه = 40 شکاف = 6 جعبه: انتهای ردیف شبکه = "span 3" پس زمینه = "#fca5a5" فاصله = 8 محتوا = "سه ردیف" پایان جعبه: پس زمینه = "#93c5fd" محتوا = "ب" پایان پایان`
`ناحیه شبکه` grid area grid-area	یک‌جا عنصر را جا می‌دهد. نام به ناحیه‌ای از `grid template areas` اشاره می‌کند. چهار عدد با خط مورب میان‌شان خط آغاز ردیف، آغاز ستون، پایان ردیف و پایان ستون‌اند، مثل `"1 / 2 / 3 / 4"`. [integer / name; up to 3 values]	`جعبه: نمایش = شبکه ستون های شبکه = "repeat(3, 1fr)" ردیف‌های خودکار شبکه = 40 شکاف = 6 جعبه: ناحیه شبکه = "1 / 2 / 3 / 4" پس زمینه = "#fca5a5" فاصله = 8 محتوا = "ردیف ۱ تا ۲، ستون ۲ تا ۳" پایان پایان`

ستون‌ها و شکستن

ستون‌های روزنامه‌ای، خط‌های میانشان و جایی که مجازند بشکنند.

ویژگی	کار آن و مقدارهای قابل قبول	نمونه
`شکستن پس از` break after break-after	اینکه پس از این عنصر شکستن اجباری باشد یا از آن پرهیز شود، با همان مقدارهای `break before`. `column` ستون را همین‌جا تمام می‌کند و `avoid` سرتیتر را با پاراگراف بعدش نگه می‌دارد. [auto, avoid, always, all, avoid-page, page, ...]	`جعبه: تعداد ستون = 2 شکاف ستون = 20 ارتفاع خط = 1.4 پاراگراف: شکستن پس از = ستونی فضا = 0 محتوا = "این پاراگراف ستون اول را تمام می‌کند." پایان پاراگراف: فضا = 0 محتوا = "پس این یکی ستون دوم را شروع می‌کند." پایان پایان`
`شکستن پیش از` break before break-before	اینکه پیش از این عنصر شکستن ستون، صفحه یا ناحیه اجباری باشد یا از آن پرهیز شود. در ستون‌ها `column` از اینجا ستون تازه شروع می‌کند و `avoid` می‌خواهد عنصر با محتوای پیش از خود بماند. مقدارهای `page` و `always` برای چاپ مهم‌اند. [auto, avoid, always, all, avoid-page, page, ...]	`جعبه: تعداد ستون = 2 شکاف ستون = 20 ارتفاع خط = 1.4 پاراگراف: فضا = 0 محتوا = "ستون اول." پایان پاراگراف: شکستن پیش از = ستونی فضا = 0 محتوا = "به زور در ستون دوم." پایان پایان`
`شکستن درون` break inside break-inside	اینکه شکستن درون این عنصر مجاز باشد یا نه. `avoid` کارت، شکل یا پاراگراف کوتاه را وقتی ستون یا صفحه تمام می‌شود یک‌تکه نگه می‌دارد. پیش‌فرض `auto` است. [auto, avoid, avoid-page, avoid-column]	`جعبه: تعداد ستون = 2 شکاف ستون = 20 ارتفاع خط = 1.4 جعبه: شکستن درون = پرهیز پس زمینه = "#fef3c7" فاصله = 8 فضا پایین = 8 محتوا = "این کارت هرگز میان دو ستون نصف نمی‌شود." پایان پاراگراف: فضا = 0 محتوا = "بقیه‌ی متن مثل همیشه ادامه می‌یابد." پایان پایان`
`تعداد ستون` column count column-count	شمار ستون‌ها، یک عدد صحیح. اگر `column width` هم باشد، بیشترین شمار ستون مجاز است. [integer / auto]	`جعبه: تعداد ستون = 2 شکاف ستون = 20 ارتفاع خط = 1.5 پاراگراف: فضا = 0 محتوا = "دو ستون متن، هر پهنایی که جعبه داشته باشد. متن میان آن‌ها پخش می‌شود تا هر دو تقریباً در یک ارتفاع تمام شوند." پایان پایان`
`پرکردن ستون` column fill column-fill	محتوا چطور میان ستون‌ها پخش شود. `balance` (پیش‌فرض) ستون‌ها را تقریباً هم‌قد می‌کند. `auto` ستون اول را تا ارتفاع جعبه پر می‌کند و بعد سراغ بعدی می‌رود، که وقتی جعبه ارتفاع ثابت دارد مهم است. [auto, balance]	`جعبه: تعداد ستون = 2 شکاف ستون = 20 پرکردن ستون = خودکار ارتفاع = 80 ارتفاع خط = 1.4 پاراگراف: فضا = 0 محتوا = "با auto ستون اول تا ارتفاع کامل جعبه پر می‌شود و بعد متن به ستون دوم می‌رود." پایان پایان`
`شکاف ستون` column gap column-gap	فاصله‌ی میان ستون‌ها. فاصله‌ی ستون‌های ظرف شبکه یا فلکس را هم تعیین می‌کند. پیش‌فرض متن چندستونی `normal` است (۱em). [length / percentage / normal]	`جعبه: تعداد ستون = 2 شکاف ستون = 40 ارتفاع خط = 1.5 پاراگراف: فضا = 0 محتوا = "فاصله‌ای چهل پیکسلی دو ستون این متن را جدا می‌کند و جدایی را آشکار می‌کند." پایان پایان`
`خط جداکننده ستون` column rule column-rule	کوتاه‌نویسی خطی که میان ستون‌ها کشیده می‌شود: ضخامت، سبک و رنگ، مثل کادر، برای نمونه `"1px solid #94a3b8"`. خط جای جداگانه‌ای نمی‌گیرد و وسط فاصله می‌نشیند. [CSS-wide keywords only]	`جعبه: تعداد ستون = 2 شکاف ستون = 30 خط جداکننده ستون = "2px dashed #64748b" ارتفاع خط = 1.5 پاراگراف: فضا = 0 محتوا = "خطی خط‌چین میان دو ستون این پاراگراف می‌گذرد، درست مثل روزنامه‌ی چاپی." پایان پایان`
`رنگ خط ستون` column rule color column-rule-color	رنگ خط میان ستون‌ها. [color]	`جعبه: تعداد ستون = 2 شکاف ستون = 30 سبک خط ستون = solid ضخامت خط ستون = 2 رنگ خط ستون = crimson ارتفاع خط = 1.5 پاراگراف: فضا = 0 محتوا = "خط میان این دو ستون قرمز تیره است و رنگش جدا از سبک و ضخامتش تعیین شده." پایان پایان`
`سبک خط ستون` column rule style column-rule-style	سبک خط میان ستون‌ها: `solid`، `dashed`، `dotted`، `double` و دیگر سبک‌های کادر. `none` (پیش‌فرض) چیزی نمی‌کشد، پس برای دیده شدن خط باید سبک بدهید. [none, hidden, dotted, dashed, solid, double, ...]	`جعبه: تعداد ستون = 2 شکاف ستون = 30 ضخامت خط ستون = 3 سبک خط ستون = dotted ارتفاع خط = 1.5 پاراگراف: فضا = 0 محتوا = "خطی نقطه‌چین این ستون‌ها را جدا می‌کند. بدون سبک، ضخامت و رنگ چیزی نمی‌کشند." پایان پایان`
`ضخامت خط ستون` column rule width column-rule-width	ضخامت خط میان ستون‌ها: یک طول، یا `thin`، `medium` و `thick`. برای دیده شدن به سبک خط نیاز دارد. [length / thin, medium, thick]	`جعبه: تعداد ستون = 2 شکاف ستون = 30 سبک خط ستون = solid ضخامت خط ستون = 4 ارتفاع خط = 1.5 پاراگراف: فضا = 0 محتوا = "خطی ضخیم و چهار پیکسلی میان این دو ستون می‌گذرد و جدایی را آشکار می‌کند." پایان پایان`
`گستره ستون` column span column-span	عنصری درون جعبه‌ی چندستونی را در همه‌ی ستون‌ها می‌کشد. مقدارها `none` (پیش‌فرض) و `all` هستند. برای سرتیتری بالای ستون‌ها به کار می‌رود. [none, all]	`جعبه: تعداد ستون = 2 شکاف ستون = 20 ارتفاع خط = 1.5 سرتیتر: اندازه = 3 گستره ستون = همه فضا = "0 0 8" محتوا = "سرتیتری در پهنای هر دو ستون" پایان پاراگراف: فضا = 0 محتوا = "متن زیر سرتیتر میان دو ستون پخش می‌شود، ولی خود سرتیتر به پهنای کل جعبه است." پایان پایان`
`عرض ستون` column width column-width	پهنای دلخواه یک ستون. مرورگر تا جایی که جا شود ستون‌هایی دست‌کم به این پهنا می‌سازد و آن‌ها را پهن می‌کند تا جعبه پر شود، پس شمارشان با پنجره عوض می‌شود. [length / auto]	`جعبه: عرض ستون = 140 شکاف ستون = 20 ارتفاع خط = 1.5 پاراگراف: فضا = 0 محتوا = "شمار ستون‌ها از پهنای موجود پیروی می‌کند و هر ستون دست‌کم ۱۴۰ پیکسل است، پس تلفن همراه یک ستون می‌گیرد و رایانه چند ستون." پایان پایان`
`چندستونی` columns columns	کوتاه‌نویسی `column width` و `column count`: `"12rem 3"` یعنی «ستون‌هایی دست‌کم ۱۲rem پهن و حداکثر ۳ تا». یک عدد تنها را با `column count` بنویسید، چون عدد تنها در اینجا به پیکسل تبدیل می‌شود. [CSS-wide keywords only]	`جعبه: چندستونی = "9rem 3" شکاف ستون = 20 ارتفاع خط = 1.5 پاراگراف: فضا = 0 محتوا = "متن در جعبه‌ی چندستونی از ستون اول پایین می‌رود و بالای ستون بعدی ادامه می‌یابد، مثل روزنامه. مرورگر شمار ستون‌هایی را که جا می‌شود خودش برمی‌گزیند." پایان پایان`

خودتان امتحان کنید

سرصفحه‌ای بسازید که در یک سو نشان، در میان سه پیوند و در سوی دیگر یک دکمه دارد، فقط با یک ردیف فلکس و چینش.
نمایشگاه عکسی از نه جعبه‌ی رنگی با repeat(auto-fit, minmax(120px, 1fr)) بسازید. جعبه‌ی اول را دو ستون و دو ردیف بگیرید.
یک چیدمان کلاسیک صفحه را با ناحیه‌های نام‌دار بنویسید: سرصفحه، فهرست چپ، بخش اصلی، ستون راست و پاورقی. بعد فقط یک رشته را عوض کنید تا فهرست به سوی دیگر برود.
نمونه‌ی چسبان را بردارید و به سرتیترها ترتیب لایه و سایه بدهید. اگر مقدار بالا را بردارید چه می‌شود؟