چیدمان جعبه انعطاف پذیر شیوهنامه آبشاری
CSS Flexible Box Layout | |
کوتهنوشت | Flexbox |
---|---|
نام بومی | CSS Flexible Box Layout |
وضعیت | Candidate Recommendation (CR) |
سال آغاز | ۲۳ ژوئیه ۲۰۰۹[۱] |
آخرین ویرایش | Level 1[۲] ۹ نوامبر ۲۰۱۸[۲] |
ویرایش پیشنمایشی | Working Draft ۲۵ مارس ۲۰۲۱[۳] |
سازمان | |
هیئت | CSS Working Group[۲] |
ویراستاران |
Former editors
|
استانداردهای پایه | CSS |
وبگاه |
چیدمان جعبه انعطاف پذیر 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.