طراحی و پیاده‌سازی وب‌سایت‌های مدرن: مفهوم Flexbox و نحوه استفاده از آن - نکته رسمی

مفهوم Flexbox و نحوه استفاده از آن

1. Flexbox یک مدل طرح بندی یک بعدی در CSS است که امکان توزیع فضا بین آیتم ها در یک کانتینر و هم ترازی آن ها را فراهم می آورد. این مدل برای چید مان عناصر در یک ردیف یا ستون بسیار کارآمد است.
2. خاصیت display: flex; در عنصر والد (flex container) باعث می شود که فرزندان مستقیم آن به فلکس آیتم (flex item) تبدیل شوند و رفتار طرح بندی Flexbox را از خود نشان دهند.
3. خاصیت flex-direction تعیین کننده جهت محور اصلی (main axis) است که می تواند row (پیش فرض)، row-reverse، column، یا column-reverse باشد. این خاصیت بر نحوه چید مان فلکس آیتم ها تاثیر مستقیم دارد.
4. خاصیت justify-content نحوه توزیع فضا و هم ترازی فلکس آیتم ها را در طول محور اصلی (main axis) تعریف می کند. مقادیر رایج شامل flex-start، flex-end، center، space-between، و space-around هستند.
5. خاصیت align-items نحوه هم ترازی فلکس آیتم ها را در طول محور متقاطع (cross axis) مشخص می کند. مقادیر معمول آن شامل stretch (پیش فرض)، flex-start، flex-end، center، و baseline می باشند.
6. خاصیت align-self امکان بازنویسی مقدار align-items را برای یک فلکس آیتم خاص فراهم می آورد و به ما اجازه می دهد تا هر آیتم را به صورت مستقل در محور متقاطع هم تراز کنیم.
7. خاصیت flex-wrap کنترل می کند که آیا فلکس آیتم ها در صورت عدم وجود فضای کافی به خط بعدی منتقل شوند یا خیر. مقادیر آن شامل nowrap (پیش فرض)، wrap، و wrap-reverse هستند.
8. خاصیت flex-grow تعیین کننده میزان رشد یک فلکس آیتم نسبت به سایر آیتم ها در صورت وجود فضای اضافی در کانتینر است. مقدار پیش فرض آن 0 است.
9. خاصیت flex-shrink تعیین کننده میزان فشرده سازی یک فلکس آیتم نسبت به سایر آیتم ها در صورت کمبود فضا در کانتینر است. مقدار پیش فرض آن 1 است.
10. ترکیب flex-grow، flex-shrink، و flex-basis با استفاده از خاصیت shorthand flex، روشی کارآمد برای تعریف رفتار انبساط و انقباض فلکس آیتم ها است. به عنوان مثال: flex: 1 1 auto;