فلکس باکس

FlexBox یک ظرف است که آیتم‌ها را در یک جهت واحد چیدمان می‌کند. می‌تواند تغییر اندازه دهد، بپیچد، تراز کند و فضا را بین آیتم‌ها توزیع کند تا فضای موجود به طور بهینه پر شود. این یک طرح‌بندی مفید برای آیتم‌های با اندازه‌های مختلف و برای تغییر اندازه آیتم‌ها هنگام تغییر فضای موجود است.

با FlexBox می‌توانید:

• نحوه بزرگ و کوچک شدن آیتم‌ها را برای پر کردن فضای موجود کنترل کنید
• وقتی فضای کافی برای موارد وجود ندارد، آنها را در ردیف‌ها یا ستون‌های جدید قرار دهید
• با استفاده از تنظیمات از پیش تعیین‌شده‌ی مناسب، فضای اضافی را بین موارد توزیع کنید

چه زمانی از FlexBox استفاده کنیم

FlexBox معمولاً برای نمایش تعداد کمی از آیتم‌ها در یک طرح کلی صفحه نمایش استفاده می‌شود. برای یک طرح کلی صفحه نمایش، Grid معمولاً انتخاب بهتری است. FlexBox از بارگذاری تنبل آیتم‌ها پشتیبانی نمی‌کند. برای نمایش تعداد زیادی از آیتم‌ها، از لیست‌ها و گریدهای تنبل استفاده کنید. اگر نیاز به قرار دادن آیتم‌ها دارید، به جای FlowRow و FlowColumn از FlexBox استفاده کنید.

اصطلاحات و مفاهیم

FlexBox آیتم‌های خود را به صورت افقی یا عمودی نمایش می‌دهد. این جهت این خطوط، محور اصلی را مشخص می‌کند. ۹۰ درجه نسبت به محور اصلی ، محور متقاطع است. طول FlexBox در امتداد محور اصلی به عنوان اندازه اصلی شناخته می‌شود. طول محور متقاطع مربوطه به عنوان اندازه متقاطع شناخته می‌شود. این اندازه‌ها و محورها اساس رفتار FlexBox را تشکیل می‌دهند.

اعمال ویژگی‌ها

شما می‌توانید ویژگی‌های FlexBox را به دو روش اعمال کنید:

• به کانتینر FlexBox با استفاده از FlexBox(config)
• به یک آیتم درون FlexBox با استفاده از Modifier.flex

ویژگی‌های کانتینر ( config )

ویژگی‌های آیتم ( Modifier.flex )

direction - جهت طرح بندی آیتم wrap - آیا در صورت ناکافی بودن اندازه اصلی، اقلام را بسته‌بندی کنیم یا خیر justifyContent - نحوه توزیع آیتم‌ها در امتداد محور اصلی alignItems - نحوه تراز کردن آیتم‌ها در امتداد محور متقاطع alignContent - نحوه توزیع فضای اضافی از اندازه عرضی وقتی چندین خط وجود دارد rowGap / columnGap - بین آیتم‌ها و خطوط فاصله اضافه می‌کند برای اطلاعات بیشتر در مورد این ویژگی‌ها ، به تنظیم رفتار کانتینر مراجعه کنید.

basis - اندازه آیتم قبل از اینکه هرگونه فضای اضافی از اندازه اصلی توزیع شود grow - سهم فضای اضافی از اندازه اصلی که این مورد باید دریافت کند shrink - سهم کسری فضا از اندازه اصلی که این مورد باید دریافت کند alignSelf - نحوه توزیع فضای اضافی از اندازه متقاطع به این مورد، alignItems را لغو می‌کند order - ترتیب طرح‌بندی را کنترل می‌کند. برای اطلاعات بیشتر در مورد این ویژگی‌ها، به بخش تنظیم رفتار آیتم مراجعه کنید.

الگوریتم چیدمان FlexBox را درک کنید

یکی از قدرتمندترین ویژگی‌های FlexBox ، توانایی آن در تغییر اندازه‌ی فرزندانش برای تطبیق با فضای موجود است. درک چگونگی انجام این کار FlexBox می‌تواند به شما در تنظیم ویژگی‌های FlexBox برای بهینه‌سازی رابط کاربری برای تمام اندازه‌های ممکن کمک کند.

الگوریتم چیدمان FlexBox به روش زیر عمل می‌کند:

1. محاسبه اندازه پایه فرزند : از مقدار basis فرزند برای محاسبه اندازه اولیه آن در امتداد محور اصلی قبل از توزیع هرگونه فضای اضافی استفاده کنید.

2. مرتب‌سازی فرزندان : فرزندان را بر اساس مقادیر order ، در صورت وجود، مرتب کنید.

3. ساخت خطوط : برای هر فرزند، بررسی کنید که آیا اندازه اولیه آن به علاوه gap در فضای باقی مانده در خط فعلی جا می‌شود یا خیر. اگر چنین است، این فرزند را در خط قرار دهید. در غیر این صورت، اگر قابلیت wrapping فعال است ، آن را در یک خط جدید قرار دهید، یا آیتم را در خط فعلی قرار دهید که سرریز شود (تا حدی توسط لبه ظرف پنهان می‌شود).

4. ترازبندی یا تغییر اندازه موارد در محور اصلی : برای هر خط، با تغییر اندازه یا ترازبندی آنها، فضای اضافی را بین موارد یا بین آنها توزیع کنید.

5. ترازبندی یا تغییر اندازه آیتم‌ها در محور عرضی : برای هر خط، با کشیدن یا ترازبندی آیتم‌ها و خطوط، فضای اضافی را بین آنها توزیع کنید.

حالا که با مفاهیم FlexBox آشنا شدید، برای ایجاد یک FlexBox ساده به بخش «شروع به کار» مراجعه کنید.