چیدمان جعبه انعطاف پذیر 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 ، ظرف را به عنصر سطح درون خطی تبدیل می کند . [۵]