چیدمان جعبه انعطاف پذیر شیوه‌نامه آبشاری

Flexbox
CSS Flexible Box Layout
کوته‌نوشت	Flexbox
نام بومی	CSS Flexible Box Layout
وضعیت	Candidate Recommendation (CR)
سال آغاز	۲۳ ژوئیه ۲۰۰۹
آخرین ویرایش	Level 1; ۹ نوامبر ۲۰۱۸
ویرایش پیش‌نمایشی	Working Draft; ۲۵ مارس ۲۰۲۱
سازمان	W3C; Apple; Google; Microsoft; Mozilla; Opera Software;
هیئت	CSS Working Group
ویراستاران	Tab Atkins Jr.; Elika J. Etemad; Rossen Atanassov; Former editors Alex Mogilevsky; L. David Baron; Neil Deakin; Ian Hickson; David Hyatt; ;
استانداردهای پایه	CSS
وبگاه	www.w3.org/TR/css-flexbox-1/

چیدمان جعبه انعطاف پذیر CSS ، معروف به Flexbox^[۴]، یک مدل چیدمان وب CSS 3 است.^[۵] در مرحله پیشنهاد نامزدهای W3C (CR) است.^[۴] طرح انعطاف پذیر به عناصر واکنش‌گرا درون یک ظرف اجازه می دهد تا با توجه به اندازه صفحه (یا دستگاه) به طور خودکار مرتب شوند.

مفاهیم ویرایش

بیشتر صفحات وب با ترکیبی از HTML (زبان نشانه گذاری ابرمتن) و CSS (شیوه نامه های آبشاری) نوشته شده اند. به طور خلاصه ، HTML محتوا و ساختار منطقی صفحه را مشخص می کند ، در حالی که CSS شکل ظاهری آن را مشخص می کند: رنگ ها ، قلم ها ، قالب بندی ، طرح و سبک آن.

چیدمان جعبه انعطاف پذیر CSS یک روش خاص برای تعیین چیدمان صفحات HTML است.

یکی از مشخص ترین ویژگی های چیدمان انعطاف پذیر ، قابلیت متناسب بودن آن براساس محیط دید آن است. جعبه های انعطاف پذیر می توانند اندازه خود را تنظیم کنند - کاهش دهند، تا از انحصار بی مورد فضا جلوگیری کنند ، یا اندازه خود را بیشتر کنند تا فضایی ایجاد کنند تا محتویات در آن محدود شوند. علاوه بر این ، چیدمان انعطاف پذیر از نظر جریان محتوا محدودیت کمتری نسبت به روش های دیگر مانند انواع نمایش بلوک (block) و درون خطی (inline) دارد که عموماً یک جهته هستند. جهت جریان انعطاف پذیر را می توان به صورت راست ، چپ ، بالا یا پایین مشخص کرد. هر یک از موارد درون یک ظرف انعطاف پذیر نیز ممکن است به طور خودکار دوباره مرتب و منظم شوند تا متناسب با فضای چیدمان موجود باشند.^[۶]

تاریخچه ویرایش

در دهه 2000 ، استفاده شدید از وب توسط تلفن همراه باعث ایجاد "چیدمان مایع" و عناصر واکنشگرا برای پاسخگویی به رشد تنوع اندازه صفحات نمایش شد. ^[۷]در سال های 2010 ، استفاده شدید از چارچوب های معروف جاوا اسکریپت ، مانند Bootstrap ، از مشخصات جعبه انعطاف پذیر CSS و طرح شبکه ای (grid layout) الهام گرفته است. ^[۸]

ماژول های CSS 3 شامل راه حلهایی شبیه به این ، مانند جعبه انعطاف پذیر^[۴] و طرح شبکه ای است . ^[۹]

تا تاریخ سپتامبر ۲۰۲۰^{[بروزرسانی]}، 98.69% از مرورگر های نصب شده ( 99.29% از مرورگر های دسکتاپ و 100% از مرورگر های تلفن همراه ) چیدمان جعبه انعطاف پذیر CSS را پشتیبانی میکنند.^[۱۰]

واژه شناسی ویرایش

اصطلاحات زیر با مدل چیدمان جعبه انعطاف پذیر مرتبط هستند.

ظرف انعطاف پذیر: عنصر اصلی (والد) که همه موارد انعطاف پذیر را در خود جای داده است. با استفاده از ویژگی نمایش CSS ، ظرف را می توان به صورت flex (انعطاف پذیر) یا inline-flex (انعطاف پذیر خطی) تعریف کرد.
مورد انعطاف پذیر: هر عنصر فرزند مستقیم که در ظرف انعطاف پذیر نگه داشته شود ، یک مورد انعطاف پذیر محسوب می شود. هر متن درون ظرف در یک مورد انعطاف پذیر ناشناخته پیچیده شده است.
محور ها: هر جعبه انعطاف پذیر شامل دو محور است: محور اصلی و عرضی. محور اصلی محوری است که موارد بر روی آن تراز می شوند. محور عرضی عمود بر محور اصلی است.
جهت انعطاف پذیری: محور اصلی را ایجاد می کند. ورودی های اختیاری: سطری (پیش فرض) ، سطری معکوس ، ستونی ، ستونی معکوس.
تراز کردن محتوا به صورت افقی: نحوه قرارگیری محتوا در محور اصلی روی خط جریان فعلی را تعیین می کند. ورودی های اختیاری: چپ ، راست ، مرکز ، فاصله بین (space-between) ، فضای اطراف (space-around).
تراز کردن موارد به صورت عمودی: پیش فرض را برای نحوه قرارگیری موارد انعطاف پذیر در محور عرضی هر خط تعیین می کند.
تراز کردن محتوا: پیش فرض را برای چیدمان خطوط محور عرضی تعیین می کند.
خود تراز شدن: نحوه قرارگیری یک مورد در امتداد محور عرضی را تعیین می کند. این هر پیش فرض تنظیم شده توسط تراز کردن موارد (Align-items) را نادیده می گیرد.

جهت ها ویرایش

شروع عرضی
پایان عرضی: جهات شروع عرضی/ پایان عرضی مشخص می کند که خطوط انعطاف پذیر از شروع عرضی تا پایان عرضی از چه مواردی پر می شوند.
شروع اصلی
پایان اصلی: جهات شروع اصلی / پایان اصلی تعیین می کنند که از کجا شروع به قرار دادن موارد انعطاف پذیر درون ظرف انعطاف پذیر کنیم ، از انتهای شروع اصلی شروع می شود و به انتهای پایان اصلی می رود.
ترتیب: عناصر را به صورت گروهی قرار می دهد و تعیین می کند که با چه ترتیبی در ظرف قرار بگیرند.
جریان انعطاف پذیر: اصطلاحات اختصاری جهت انعطاف پذیری (flex-direction) و flex-wrap برای جاگذاری محتوای انعطاف پذیر استفاده می شود.

خطوط ویرایش

خطوط: موارد انعطاف پذیر را می توان بر روی یک خط منفرد یا چندین خط قرار داد که توسط خاصیت flex-wrap تعریف شده است ، که هم جهت محور عرضی و هم اینکه چگونه خطوط درون ظرف قرار می گیرند را کنترل می کند.

ابعاد ویرایش

اندازه اصلی
اندازه عرضی: اندازه اصلی و اندازه عرضی، ارتفاع و عرض ظرف انعطاف پذیر هستند که هر کدام به ترتیب با محورهای اصلی و عرضی کار می کنند.

استفاده ویرایش

طراحی یک عنصر به عنوان یک عنصر انعطاف پذیر نیاز به تنظیم ویژگی نمایش CSS عنصر به صورت انعطاف پذیر (flex) یا انعطاف پذیر خطی (inline-flex) دارد ، به شرح زیر:

display: flex;

یا:

display: inline-flex;

با تنظیم نمایش (display) روی یکی از دو مقدار بالا ، یک عنصر به یک ظرف انعطاف پذیر تبدیل می شود و فرزندان آن به موارد انعطاف پذیر تبدیل می شوند. تنظیم نمایشگر به حالت انعطاف پذیر، ظرف را به عنصری در سطح بلوک تبدیل می کند ، در حالی که تنظیم نمایش(display) بر روی inline-flex ، ظرف را به عنصر سطح درون خطی تبدیل می کند . ^[۵]

تراز کردن در مرکز ویرایش

یکی از مزایای جعبه انعطاف پذیر این است که می توان به راحتی هم به صورت افقی و هم عمودی موارد درون ظرف را در مرکز یک صفحه تراز کرد.

display: flex;
align-items: center;
justify-content: center;

منابع ویرایش

↑ "CSS Flexible Box Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-08.
↑ ^۲٫۰ ^۲٫۱ ^۲٫۲ ^۲٫۳ Atkins Jr., Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (2018-11-09). "CSS Flexible Box Layout Module Level 1". W3C. Retrieved 2021-04-08.
↑ Atkins Jr, Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (2021-03-25). "CSS Flexible Box Layout Module Level 1". CSS Working Group Editor Drafts. Retrieved 2021-04-08.
↑ ^۴٫۰ ^۴٫۱ ^۴٫۲ "Basic concepts of flexbox". MDN Web Docs. n.d. Retrieved 2021-04-08.
↑ ^۵٫۰ ^۵٫۱ "Basic concepts of flexbox". MDN Web Docs. n.d. Retrieved 2021-04-08.
↑ Shepherd, Richard (2011-09-19). "CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started". Smashing Magazine. Retrieved 2021-04-08.
↑ Bail, Jeff (2012-10-23). "Use CSS media queries to create responsive websites". IBM Developer. Archived from the original on 2020-10-13. Retrieved 2021-04-08.
↑ Shepherd, Richard (2011-09-19). "CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started". Smashing Magazine. Retrieved 2021-04-08.
↑ "CSS Grid Layout Module Level 1". W3C. CSS Working Group. 2020-12-18. Retrieved 2021-04-08.
↑ "CSS Flexible Box Layout Module". Can I use. Retrieved 2020-09-03.

[css-flex-history-1] "CSS Flexible Box Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-08.

[css-flex-v1-2] ۲٫۰ ^۲٫۱ ^۲٫۲ ^۲٫۳ Atkins Jr., Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (2018-11-09). "CSS Flexible Box Layout Module Level 1". W3C. Retrieved 2021-04-08.

[flexbox-draft-3] Atkins Jr, Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (2021-03-25). "CSS Flexible Box Layout Module Level 1". CSS Working Group Editor Drafts. Retrieved 2021-04-08.

[mdn-webdocs-flexbox-4] ۴٫۰ ^۴٫۱ ^۴٫۲ "Basic concepts of flexbox". MDN Web Docs. n.d. Retrieved 2021-04-08.

[mdn-webdocs-flexbox2-5] ۵٫۰ ^۵٫۱ "Basic concepts of flexbox". MDN Web Docs. n.d. Retrieved 2021-04-08.

[6] Shepherd, Richard (2011-09-19). "CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started". Smashing Magazine. Retrieved 2021-04-08.

[7] Bail, Jeff (2012-10-23). "Use CSS media queries to create responsive websites". IBM Developer. Archived from the original on 2020-10-13. Retrieved 2021-04-08.

[8] Shepherd, Richard (2011-09-19). "CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started". Smashing Magazine. Retrieved 2021-04-08.

[css3-grid-9] "CSS Grid Layout Module Level 1". W3C. CSS Working Group. 2020-12-18. Retrieved 2021-04-08.

[caniuse.com2-10] "CSS Flexible Box Layout Module". Can I use. Retrieved 2020-09-03.

[۴]

[۵]

[۱]

[۲]

[۳]

[۶]

[۷]

[۸]

[۹]

[۱۰]