CSS Flexbox (مخفف Flexible Box Layout) یک مدل چیدمان قدرتمند و کارآمد در CSS است که برای توزیع فضا و تراز کردن عناصر در یک بُعد (یعنی در یک ردیف یا یک ستون) طراحی شده است. این ابزار، کنترل دقیقی بر روی نحوه قرارگیری، مرتبسازی، و تغییر اندازه آیتمها در یک کانتینر فراهم میکند و بسیاری از مشکلات چیدمانهای قدیمی را حل کرده است.
۱. مبانی Flexbox: کانتینر و آیتمها
هنگامی که یک المان را به عنوان “فلکس کانتینر” تعریف میکنیم، تمام فرزندان مستقیم آن به صورت “فلکس آیتم” در میآیند و تحت مدیریت Flexbox قرار میگیرند.
-
Flex Container (کانتینر فلکس):
-
برای تبدیل یک المان به کانتینر فلکس، از خاصیت
display: flex;یاdisplay: inline-flex;استفاده میکنیم. -
display: flex;: المان به یک بلوک تبدیل شده و آیتمهای درونش به صورت فلکس چیده میشوند. -
display: inline-flex;: المان به صورت درونخطی (inline) رفتار میکند، اما آیتمهای درونش به صورت فلکس چیده میشوند. -
Flex Items (آیتمهای فلکس):
-
عناصر فرزند مستقیم کانتینر فلکس.
-
این آیتمها به طور پیشفرض در یک ردیف و از چپ به راست (در زبانهای راست به چپ مانند فارسی، از راست به چپ) قرار میگیرند.
۲. محورهای اصلی در Flexbox
Flexbox بر اساس دو محور کار میکند:
- Main Axis (محور اصلی): جهتی که آیتمها در آن چیده میشوند. به طور پیشفرض، این محور افقی است (از چپ به راست).
- Cross Axis (محور متقاطع): محوری که عمود بر محور اصلی است. به طور پیشفرض، این محور عمودی است.
۳. کنترل جهت چیدمان (flex-direction)
با استفاده از خصوصیت flex-direction بر روی کانتینر فلکس، میتوان جهت محور اصلی را تغییر داد:
row(پیشفرض): آیتمها در یک ردیف، از چپ به راست چیده میشوند.row-reverse: آیتمها در یک ردیف، از راست به چپ چیده میشوند.column: آیتمها در یک ستون، از بالا به پایین چیده میشوند (محور اصلی عمودی میشود).column-reverse: آیتمها در یک ستون، از پایین به بالا چیده میشوند.
۴. کنترل فضای بین آیتمها (justify-content)
این خصوصیت نحوه توزیع فضا و تراز کردن آیتمها را در طول محور اصلی کنترل میکند:
flex-start(پیشفرض): آیتمها در ابتدای محور اصلی قرار میگیرند.flex-end: آیتمها در انتهای محور اصلی قرار میگیرند.center: آیتمها در مرکز محور اصلی قرار میگیرند.space-between: اولین آیتم در ابتدا، آخرین آیتم در انتها قرار میگیرد و فضای خالی باقیمانده به طور مساوی بین آیتمها توزیع میشود.space-around: فضای خالی به طور مساوی در دو طرف هر آیتم توزیع میشود (بنابراین فضای بین دو آیتم دو برابر فضای بین آیتم و لبه کانتینر خواهد بود).space-evenly: فضای خالی به طور مساوی بین تمام آیتمها و همچنین بین آیتمها و لبههای کانتینر توزیع میشود.
۵. کنترل تراز عمودی آیتمها (align-items)
این خصوصیت نحوه تراز کردن آیتمها را در طول محور متقاطع کنترل میکند (یعنی عمود بر جهت flex-direction):
stretch(پیشفرض): آیتمها تا جایی که فضا اجازه دهد، کشیده میشوند تا تمام ارتفاع/عرض کانتینر را پر کنند (به شرطی که ارتفاع/عرض تعیین نشده باشد).flex-start: آیتمها در ابتدای محور متقاطع قرار میگیرند.flex-end: آیتمها در انتهای محور متقاطع قرار میگیرند.center: آیتمها در مرکز محور متقاطع قرار میگیرند.baseline: آیتمها بر اساس خط مبنای متنشان تراز میشوند.
۶. کنترل پیچیدن آیتمها (flex-wrap)
به طور پیشفرض، تمام آیتمها سعی میکنند در یک خط (یا ستون) جای بگیرند. اگر فضای کافی نباشد، فشرده میشوند. flex-wrap نحوه مدیریت این وضعیت را تعیین میکند:
nowrap(پیشفرض): آیتمها فشرده میشوند تا در یک خط جای بگیرند.wrap: آیتمها در صورت نیاز به خطوط یا ستونهای بعدی منتقل میشوند.wrap-reverse: مانندwrap، اما خطوط یا ستونهای اضافی به صورت معکوس قرار میگیرند.
۷. کنترل آیتمهای منفرد
برخی خصوصیات را میتوان مستقیماً بر روی فلکس آیتمها اعمال کرد تا رفتارشان را نسبت به بقیه تغییر داد:
order:: ترتیب نمایش آیتمها را به صورت دلخواه تغییر میدهد.flex-grow:,flex-shrink:,flex-basis:: کنترل دقیق بر روی نحوه رشد، انقباض و اندازه اولیه آیتم.flex:: ترکیب خلاصهشدهای از سه خصوصیت بالا.align-self:: برای تراز کردن یک آیتم خاص در محور متقاطع، که بر تنظیماتalign-itemsوالد اولویت دارد.
Flexbox یک ابزار اساسی برای هر توسعهدهنده وب مدرن است و یادگیری آن به شما کمک میکند تا چیدمانهای پیچیده را به سادگی پیادهسازی کنید.
کلیدواژه ها : Flexbox CSS-چیدمان انعطافپذیر-Flex Container-Flex Item-Main Axis-Cross Axis-flex-direction-justify-content-align-items-flex-wrap-
