Flexbox
محتویات
- ۱ ماژول چیدمان Flextbox در CSS
- ۲ پشتیبانی مرورگرها
- ۳ عناصر Flexbox
- ۴ عنصر والد (نگه دارنده (به انگلیسی: Container))
- ۵ ویژگی flex-direction
- ۶ ویژگی flex-wrap
- ۷ ویژگی flex-flow
- ۸ ویژگی justify-content
- ۹ ویژگی align-items
- ۱۰ ویژگی align-content
- ۱۱ وسط چین کردن کامل
- ۱۲ عناصر فرزند (آیتمها)
- ۱۳ ویژگی order (به فارسی: ترتیب)
- ۱۴ ویژگی flex-grow
- ۱۵ ویژگی flex-shrink
- ۱۶ ویژگی flex-basis
- ۱۷ ویژگی flex
- ۱۸ ویژگی align-self
- ۱۹ گالری تصاویر واکنش گرا با Flexbox
- ۲۰ وبسایت واکنش گرا با Flexbox
- ۲۱ ویژگیهای Flexbox در CSS
- ۲۲ منابع آموزشی
ماژول چیدمان Flextbox در CSS
قبل از ماژول چیدمان Flexbox، چهار حالت چیدمان وجود داشت:[۱]
- Block، برای قسمت های موجود در صفحه
- Inline، برای متن
- Table، برای دادههای دو بعدی جدول
- Positioned، برای موقعیت صریح یک عنصر
ماژول چیدمان Flexbox طراحی ساختار چیدمان واکنش گرا و منعطف را بدون استفاده از Float یا positioning (به فارسی: موقعیتدهی) ساده تر میکند.
پشتیبانی مرورگرها
ویژگیهای flexbox در تمامی مرورگرهای مدرن پشتیبانی میشود.
![]() |
![]() |
![]() |
![]() |
![]() |
۲۹٫۰ | ۱۱٫۰ | ۲۲٫۰ | ۱۰ | ۴۸ |
عناصر Flexbox
برای شروع استفاده از مدل flexbox، ابتدا میبایست یک نگه دارندهٔ flex تعریف کنید.
عنصر بالا یک نگه دارنده flex (ناحیه آبی رنگ) با سه آیتم flex را نشان میدهد:
مثال
یک نگه دارنده flex با سه آیتم flex:
عنصر والد (نگه دارنده (به انگلیسی: Container))
نگهدارنده flex با تنظیم ویژگی display
برابر با flex، انعطاف پذیر میشود:
ویژگیهای نگه دارنده flex به صورت زیر هستند:
ویژگی flex-direction
ویژگی flex-direction
مشخص میکند که نگه دارنده میخواهد آیتمهای flex را در کدام جهت بچیند:
مثال
مقدار column آیتمهای flex را به صورت عمودی (از بالا به پایین) میچیند:
مثال
مقدار column-reverse آیتمهای flex را به صورت عمودی بالعکس (از پایین به بالا) میچیند:
مثال
مقدار row آیتمهای flex را به صورت افقی (از چپ به راست) میچیند:
مثال
مقدار row-reverse آیتمهای flex را به صورت افقی بالعکس (از راست به چپ) میچیند:
ویژگی flex-wrap
ویژگی flex-wrap
مشخص میکند که آیتمهای flex میبایست به خط بعدی بروند یا خیر.
برای درک بهتر ویژگی flex-wrap
مثال زیر 12 آیتم flex دارد.
مثال
مقدار wrap مشخص میکند که آیتمهای flex در صورت لزوم به خط بعدی خواهند رفت:
مثال
مقدار nowrap مشخص میکند که آیتمهای flext به خط بعدی نخواهند رفت (این مقدار پیشفرض است):
مثال
مقدار wrap-reverse مشخص میکند که آیتمهای flexible در صورت لزوم به ترتیب برعکس به خط بعدی خواهند رفت:
ویژگی flex-flow
ویژگی flex-flow
یک ویژگی مختصر برای تنظیم همزمان دو ویژگی flex-direction
و flex-wrap
است.
ویژگی justify-content
ویژگی justify-content
برای تراز کردن آیتمهای flex استفاده میشود:
مثال
مقدار center آیتمهای flex را در وسط نگه دارنده تراز میکند.
مثال
مقدار flex-start آیتمهای flex را در ابتدای نگه دارنده (این مقدار پیشفرض است) تراز میکند:
مثال
مقدار flex-end آیتمهای flex را در انتهای نگه دارنده تراز میکند.
مثال
مقدار space-around آیتمهای flex را با فضایی خالی در قبل، بین، و بعد از خطوط نمایش میدهد:
مثال
مقدار space-between آیتمهای flex را با فاصله بین خطوط نمایش میدهد:
ویژگی align-items
ویژگی align-items
برای تراز کردن عمودی آیتمهای flex استفاده میشود.
در این مثالها ما از یک نگه دارنده ۲۰۰ پیکسلی بلند، برای درک بهتر ویژگی align-items
استفاده میکنیم.
مثال
مقدار center آیتمهای flex را در وسط نگه دارنده تراز میکند:
مثال
مقدا flex-start آیتمهای flex را در بالای نگه دارنده تراز میکند:
مثال
مقدار flex-end آیتمهای flex را در پایین نگه دارنده تراز میکند:
مثال
مقدار stretch آیتمهای flex را میکِشد تا نگه دارنده را پر کنند (این گزینه پیشفرض است):
مثال
مقدار baseline آیتمهای flex را همانند تراز baseline آنها تراز میکند:
نکته: این مثال از font-sizeهای متفاوت برای نشان دادن اینکه آیتمها توسط baseline متن خود تراز میشوند استفاده کردهاست.
ویژگی align-content
ویژگی align-content
برای تراز خطوط flex استفاده میشود.
در این مثالها از یک نگهدارنده ۶۰۰ پیکسلی بلند، با ویژگی flex-wrap با مقدار wrap، برای بهتر نشان دادن ویژگی align-content
استفاده میکنیم.
مثال
مقدار space-between خطوط flex را با فاصله ای یکسان بین آنها نمایش میدهد:
مثال
مقدار space-around خطوط flex را با فاصله قبل، بین، و بعد از آنها نشان میدهد:
مثال
مقدار stretch خطوط flex را میکشد تا فضای خالی باقی مانده را پر کنند (این مقدار پیشفرض است):
مثال
مقدار center خطوط flex را در وسط نگه دارنده نمایش میدهد:
مثال
مقدار flex-start خطوط flex را در ابتدای نگهدارنده نمایش میدهد:
مثال
مقدار flex-end خطوط flex را در انتهای نگهدارنده نمایش میدهد:
وسط چین کردن کامل
در مثال بعدی، مشکل رایج استایل را حل خواهیم کرد: وسط چین کردن کامل
راه حل: هر دو ویژگی justify-content
و align-items
را با مقدار center مقدار دهی کنید، و آیتمهای flex بدون نقص وسط چین خواهند شد.
عناصر فرزند (آیتمها)
عناصر فرزند مستقیم یک نگه دارنده flex به صورت خودکار به آیتمهای flexible (flex) تبدیل میشوند.
عنصر بالا نشان دهنده چهار آیتم آبی flex درون یک نگه دارنده flex خاکستری است.
ویژگیهای آیتم flex عبارتند از:
ویژگی order (به فارسی: ترتیب)
ویژگی order
مشخص کننده ترتیب عناصر flex است.
لزومی ندارد که اولین آیتم flex در کد، در چیدمان نیز به عنوان اولین آیتم نمایش داده شود.
مقدار order باید یک عدد باشد، مقدار پیشفرض صفر است.
مثال
ویژگی order میتواند ترتیب قرارگیری آیتمهای flex را تغییر دهد:
ویژگی flex-grow
ویژگی flex-grow
مشخص میکند که یک آیتم flex نسبت به سایر آیتمهای flex چقدر بزرگتر خواهد شد.
مقدار میبایست یک عدد باشد، مقدار پیشفرض عدد صفر است.
مثال
بزرگشدن سومین آیتم flex هشت برابر سریعتر از سایر آیتمهای flex:
ویژگی flex-shrink
ویژگی flex-shrink
مشخص میکند که یک آیتم flex نسبت به سایر آیتمهای flex چقدر کوچکتر خواهد شد.
مقدار این ویژگی نیز میبایست یک عدد باشد، مقدار پیشفرض 1 است.
مثال
آیتم flex سوم اجازه کوچک شدن به اندازه سایر آیتمهای flex را نمی دهد:
ویژگی flex-basis
ویژگی flex-basis
اندازه ابتدایی یک آیتم flex را مشخص میکند.
مثال
تنظیم طول ابتدایی سومین آیتم flex روی ۲۰۰ پیکسل:
ویژگی flex
ویژگی flex
یک ویژگی مختصر برای ویژگیهای flex-grow
، flex-shrink
و flex-basis
است.
مثال
تبدیل سومین آیتم flex غیرقابل بزرگ شدن (۰)، غیرقابل کوچک شدن (۰)، و با طول ابتدایی ۲۰۰ پیکسل:
ویژگی align-self
ویژگی align-self
ترازبندی را برای آیتم انتخاب شده درون نگه دارنده flexible مشخص میکند.
ویژگی align-self
ترازبندی پیشفرض را که توسط ویژگی align-items
نگهدارنده تنظیم شده، بازنویسی میکند.
در این مثالها از یک نگهدارنده با بلندی ۲۰۰ پیکسل، برای نمایش بهتر ویژگی align-self
استفاده میکنیم:
مثال
تراز کردن آیتم سوم flex در وسط نگه دارنده:
مثال
تراز کردن دومین آیتم Flex در بالای نگه دارنده، و سومین آیتم flex در پایین نگه دارنده:
گالری تصاویر واکنش گرا با Flexbox
از flexbox برای ساخت گالری تصاویر واکنش گرایی استفاده می کند که براساس اندازه صفحه نمایش، بین چهار، دو، یا تصاویر تمام صفحه متغیر است:
وبسایت واکنش گرا با Flexbox
از flexbox برای ساخت یک وبسایت واکنش گرا، شامل یک navigation bar منعطف (به انگلیسی: flexible) و محتوای منعطف استفاده می کند:
ویژگیهای Flexbox در CSS
جدول زیر تمامی ویژگیهای CSS که با flexboxاستفاده میشوند را لیست کردهاست:
ویژگی | توضیحات |
---|---|
display | نوع جعبه مورد استفاده برای یک عنصر HTML را مشخص میکند |
flex-direction | جهت آیتمهای flexible درون یک نگه دارنده flex را مشخص میکند |
justify-content | آیتمهای flex را زمانی که آیتمها تمام فضای در دسترس موجود در محور اصلی را استفاده نمیکنند به صورت افقی تراز میکند |
align-items | آیتمهای flex را زمانی که آیتمها تمام فضای در دسترس موجود در محور اصلی را استفاده نمیکنند به صورت عمودی تراز میکند |
flex-wrap | مشخص میکند که آیا آیتمهای flex در صورت نبود فضای کافی در خط flex، میبایست به خط بعدی بروند یا نه |
align-content | رفتار ویژگی flex-wrap را ویرایش میکند. این ویژگی شبیه به align-items است، اما به جای تراز بندی آیتمهای flex، خطوط flex را تراز میکند |
flex-flow | یک ویژگی مختصر برای ویژگیهای flex-direction و Flex-wrap |
order | ترتیب یک آیتم flexible را نسبت به سایر آیتمهای flex درون نگه دارنده یکسان، مشخص میکند |
align-self | برای آیتمهای flex استفاده میشود. ویژگی align-items نگه دارنده را بازنویسی میکند |
flex | یک ویژگی مختصر برای ویژگیهای flex-grow ,flex-shirnk و flex-basis |
منابع آموزشی