آشنایی با سیستم چیدمان Flexbox در CSS
سیستم چیدمان جعبه انعطافپذیر یا CSS Flexbox یک مدل چیدمان یکبعدی است که توزیع فضا و تراز کردن عناصر را در یک کانتینر، حتی زمانی که اندازه آنها ناشناخته یا پویا باشد، مدیریت میکند. این سیستم به طراحان و توسعهدهندگان وب اجازه میدهد تا بدون نیاز به محاسبات پیچیده ریاضی یا استفاده از روشهای قدیمی مانند float و positioning، چیدمانهای منعطف و واکنشگرا ایجاد کنند. با استفاده از ابزار سازنده Flexbox، شما میتوانید ویژگیهای مختلف کانتینر و آیتمهای آن را به صورت بصری تغییر دهید، رفتار زنده آنها را مشاهده کنید و در نهایت کد CSS بهینه را برای پروژه خود دریافت کنید.
ویژگیهای کانتینر در Flexbox
تنظیمات اصلی چیدمان در سطح کانتینر (پدر) تعریف میشوند و رفتار کلی تمام آیتمهای فرزند را تحت تأثیر قرار میدهند. ابزار سازنده Flexbox کنترلهای زیر را برای مدیریت کانتینر در اختیار شما قرار میدهد:
- جهت (Direction): این ویژگی محور اصلی چیدمان را مشخص میکند. گزینههای در دسترس شامل سطری (Row)، سطری معکوس، ستونی (Column) و ستونی معکوس است.
- شکستن خط (Wrap): تعیین میکند که آیا آیتمها در صورت کمبود فضا باید در یک خط باقی بمانند یا به خطوط بعدی منتقل شوند. گزینههای این بخش شامل بدون شکستن خط، شکستن خط (Wrap) و شکستن خط معکوس است.
- تراز کردن محور اصلی (Justify content): نحوه توزیع فضای خالی را در امتداد محور اصلی مشخص میکند. مقادیر قابل تنظیم عبارتند از: شروع، پایان، مرکز، فاصله بینابینی (Space between)، فاصله در اطراف (Space around) و فاصله یکنواخت (Space evenly).
- تراز کردن آیتمها (Align items): تراز تکتک آیتمها را در امتداد محور فرعی کانتینر کنترل میکند. گزینههای آن شامل شروع، پایان، مرکز، کشیده شدن (Stretch) و خط مبنا (Baseline) است.
- تراز کردن محتوا (Align content): زمانی که شکستن خط فعال است و چندین خط از آیتمها وجود دارد، این ویژگی نحوه توزیع فضای خالی بین خطوط را مشخص میکند. گزینههای آن شامل شروع، پایان، مرکز، کشیده شدن (Stretch)، فاصله بینابینی (Space between)، فاصله در اطراف (Space around) و فاصله یکنواخت (Space evenly) است.
- فاصله (Gap): یک مقدار عددی است که فاصله مستقیم بین آیتمها و همچنین فاصله بین خطوط ایجاد شده را بدون نیاز به مارجینهای اضافی تنظیم میکند.
ویژگیهای اختصاصی آیتمها در Flexbox
علاوه بر تنظیمات کلی کانتینر، هر یک از آیتمهای فرزند میتوانند رفتارهای اختصاصی خود را داشته باشند. در ابزار سازنده Flexbox، با کلیک روی دکمه افزودن آیتم، آیتمهای جدیدی مانند "Item 5" به طرح اضافه میشوند. شما میتوانید ویژگیهای زیر را برای هر آیتم به صورت مجزا تنظیم کنید:
- ترتیب (Order): یک مقدار عددی است که ترتیب نمایش فیزیکی آیتم را روی صفحه، بدون تغییر در ساختار کدهای HTML، جابهجا میکند.
- رشد (Grow): یک مقدار عددی است که مشخص میکند یک آیتم چقدر میتواند بزرگ شود تا فضای خالی موجود در کانتینر را پر کند.
- انقباض (Shrink): یک مقدار عددی است که توانایی فشرده شدن و کوچک شدن آیتم را در شرایطی که فضای کانتینر کافی نیست، تعیین میکند.
- مبنا (Basis): اندازه اولیه آیتم را قبل از اعمال ویژگیهای رشد یا انقباض مشخص میکند و میتواند یک مقدار عددی مشخص یا مبنای خودکار (Auto basis) باشد.
- تراز کردن خود (Align self): به یک آیتم خاص اجازه میدهد تا رفتار تراز کردن پیشفرض کانتینر (Align items) را نادیده بگیرد و تراز اختصاصی خود را در محور فرعی داشته باشد. گزینههای آن شامل خودکار، شروع، پایان، مرکز، کشیده شدن (Stretch) و خط مبنا (Baseline) است.
تعامل محورها و رفتار شکستن خطوط
یکی از مفاهیم کلیدی در درک Flexbox، رابطه بین محور اصلی (Main Axis) و محور فرعی (Cross Axis) است. هنگامی که جهت (Direction) را از سطری (Row) به ستونی (Column) تغییر میدهید، این دو محور با یکدیگر جابهجا میشوند. این جابهجایی مستقیماً بر نحوه عملکرد تراز کردن محور اصلی (Justify content) و تراز کردن آیتمها (Align items) تأثیر میگذارد.
همچنین، رفتار شکستن خطوط نقش مهمی در چیدمانهای چندخطی دارد. با غیرفعال کردن شکستن خط (No wrap)، تمام آیتمها به اجبار در یک خط قرار میگیرند که ممکن است منجر به فشرده شدن شدید یا بیرونزدگی آنها شود. اما زمانی که شکستن خط (Wrap) فعال میشود، آیتمهایی که در عرض کانتینر جا نمیشوند به خط بعدی منتقل میشوند. در این حالت، ویژگی تراز کردن محتوا (Align content) فعال شده و فاصله بین این خطوط را به عنوان یک گروه واحد تنظیم میکند. ویژگی فاصله (Gap) نیز به طور همزمان فاصله افقی بین آیتمها و فاصله عمودی بین خطوط ایجاد شده را مدیریت میکند.
الگوهای چیدمان رایج با Flexbox
با ترکیب ویژگیهای مختلف کانتینر و آیتمها، میتوان الگوهای طراحی وب بسیار رایج را به سادگی پیادهسازی کرد:
| الگوی چیدمان | تنظیمات کلیدی کانتینر | رفتار آیتمها |
|---|---|---|
| مرکز | تراز کردن محور اصلی روی مرکز و تراز کردن آیتمها روی مرکز | آیتم دقیقاً در وسط کانتینر قرار میگیرد |
| نوار ناوبری | جهت روی سطری (Row) و تراز کردن محور اصلی روی فاصله بینابینی (Space between) | لوگو و منوها در دو طرف مخالف قرار میگیرند |
| پشته (Stack) | جهت روی ستونی (Column) | آیتمها به صورت عمودی روی یکدیگر قرار میگیرند |
| کارتها | شکستن خط (Wrap) فعال و تراز کردن محور اصلی روی فاصله بینابینی یا یکنواخت | کارتها در ردیفهای منعطف کنار هم چیده میشوند |
| منوی کناری | جهت روی سطری (Row) | منوی کناری با اندازه ثابت و بخش محتوا با رشد (Grow) فعال |
حریم خصوصی و نحوه پردازش ابزار
طرحبندی شما کاملاً در مرورگرتان ساخته میشود. هیچیک از تنظیمات شما در BroBroGo آپلود نخواهد شد. تمام فرآیند پردازش مقادیر، شبیهسازی بصری و تولید کدهای CSS به صورت محلی در سیستم شما انجام میشود.
پس از اتمام طراحی، کدهای CSS تولید شده برای کانتینر و آیتمها در بخش خروجی نمایش داده میشوند. توجه داشته باشید که فقط آیتمهایی که ویژگیهای پیشفرض آنها را تغییر دادهاید، استایل اختصاصی خود را در خروجی CSS دریافت میکنند تا از تولید کدهای اضافی جلوگیری شود. با کلیک روی دکمه کپی CSS، وضعیت دکمه به "Copied" تغییر میکند و کد مستقیماً در حافظه موقت سیستم شما ذخیره میشود.
سوالات متداول
تفاوت بین justify-content و align-items چیست؟
ویژگی justify-content آیتمها را در امتداد محور اصلی — جهتی که سطر یا ستون جریان دارد — فاصلهگذاری میکند، در حالی که align-items آنها را در امتداد محور فرعی تراز میکند. جهت را از row به column تغییر دهید تا دو محور جابهجا شوند؛ در این حالت justify-content از بالا به پایین و align-items از چپ به راست کار خواهد کرد.
کنترلهای اختصاصی هر آیتم چگونه کار میکنند؟
یک آیتم را با شماره آن انتخاب کنید، سپس مشخص کنید که چقدر بزرگ شود تا فضای خالی را پر کند (grow)، چقدر در فضای کم فشرده شود (shrink)، اندازه اولیه آن چقدر باشد (basis) و تراز اختصاصی آن در محور فرعی چگونه باشد. ویژگی order ترتیب نمایش آیتم را روی صفحه بدون تغییر در HTML جابهجا میکند. فقط آیتمهایی که تغییر میدهید، استایل اختصاصی خود را در خروجی CSS دریافت میکنند.
چه زمانی wrap و align-content اهمیت پیدا میکنند؟
با غیرفعال کردن wrap، تمام آیتمها مجبور میشوند در یک خط قرار بگیرند و ممکن است فشرده و باریک شوند. با فعال کردن آن، آیتمهایی که جا نمیشوند به خط بعدی میروند — اینجاست که align-content وارد عمل میشود و خطوط را به عنوان یک گروه فاصلهگذاری میکند. ویژگی Gap نیز فاصله بین آیتمها و بین خطوط را بدون نیاز به مارجین تنظیم میکند.