فلکس باکس (Flexbox) چیست؟
در آموزش flexbox در css اگر مقدار کمی تجربه در زمینه طراحی سایت داشته باشید می دانید که طراحان سایت تا قبل از معرفی فلکس باکس (Flexbox)، برای قالب بندی صفحات سایت و کنار هم چیدن المان های صفحه یا همان صفحه آرایی چه زجرهایی میکشدند! پس مهم است که به عنوان یک طراح سایت بدانید فلکس باکس چیست؟ پس در ادامه مطلب با ما همراه باشید تا به طور کامل درباره اینکه فلکس باکس چیست و چه ویژگی هایی دارد، صحبت کنیم.
فلکس باکس چیست؟
Flexbox یا Flexible Box Layout یک مدل چیدمان CSS است که روشی ساده و انعطاف پذیر برای چیدمان عناصر در یک صفحه وب ارائه می دهد. در واقع flexbox برای رسیدگی به رایج ترین سناریوهای چیدمان طراحی شده است و راهی برای توزیع فضا و تراز کردن عناصر در یک ظرف (container) فراهم می کند. برای تعیین موقعیت و ابعاد باکس ها در CSS می توانید از یکی از حالت های طرح بندی موجود استفاده کنید:
طرح بلوک – The block layout
از این حالت در تهیه اسناد استفاده می شود.
طرح بندی درون خطی – The inline layout
از این حالت در ترسیم متن استفاده می شود.
چیدمان جدول – The table layout
از این حالت در چیدمان جداول استفاده می شود.
طرح جدول – The table layout
از این حالت در موقعیت یابی عناصر استفاده می شود.
همه این حالت ها برای تراز کردن عناصر خاص مانند اسناد متن، جداول و غیره استفاده می شوند، با این حال، هیچ یک از این ها راه حل کاملی برای تهیه وب سایت های پیچیده ارائه نمی دهد. این جاست که فلکس باکس Flexbox وارد میدان می شود.
پیش نیاز های فلکس باکس چیست؟
حال که می دانید فلکس باکس چیست، برای شروع کار با Flexbox، باید درک اولیه ای از HTML و CSS داشته باشید. برای یادگیری فلکس باکس لازم است تا با مهمترین تگ های HTML، انواع ویژگی ها و صفت ها (attribute) و مدل جعبه در CSS آشنا باشید. همچنین درک درستی از صفت های نمایش در CSS و مقادیر مختلفی که می تواند بگیرد (به عنوان مثال، inline، block، inline-block و غیره) داشته باشید.
علاوه بر این، لازم است که یک ویرایشگر متن برای کدنویسی و یک مرورگر وب برای پیش نمایش نتایج کد خود راه اندازی کنید. می توانید از بهترین ویرایشگر کد html و css و یا هر ویرایشگر متنی که ترجیح می دهید، استفاده کنید. همچنین داشتن تجربه در استفاده از فریمورک های CSS مانند Bootstrap یا Foundation به شما در یادگیری فلکس باکس کمک خواهد کرد، زیرا این فریمورک ها، از Flexbox برای طرح بندی های خود استفاده می کنند.
کاربرد فلکس باکس چیست؟
همانطور که گفتیم Flexbox یک ماژول طرح بندی در CSS است که به شما این امکان را می دهد که به راحتی طرح بندی های انعطاف پذیر و پاسخگو برای صفحات وب خود ایجاد کنید. مجموعه ای از ویژگی ها و مقادیر را فراهم می کند که به شما امکان می دهد اندازه، فاصله، تراز و ترتیب عناصر را در یک ظرف کنترل کنید. برخی از مزایا و کاربرهای کلیدی استفاده از Flexbox عبارتند از:
ساده سازی طرح بندی
با Flexbox، می توانید طرح بندی های پیچیده‌تر و پویاتر را بدون تکیه بر تکنیک‌های چیدمان سنتی مانند شناور یا موقعیت‌یابی ایجاد کنید. این می تواند کد را ساده کرده و ایجاد و نگهداری طرح بندی ها را آسان تر کند.
بهبود پاسخگویی
فلکس باکس راهی برای ایجاد طرح های واکنش گرا ارائه می دهد که با اندازه های مختلف صفحه نمایش و دستگاه ها سازگار هستند. می توانید از ویژگی هایی مانند flex-wrap و order برای تغییر چیدمان عناصر در صفحه های کوچکتر استفاده کنید و می توانید از ویژگی هایی مانند flex-grow و flex-shrink برای تنظیم اندازه و فاصله عناصر در صورت نیاز استفاده کنید.
ارائه کنترل تراز
فلکس باکس تراز کردن عناصر در یک ظرف را به صورت افقی و عمودی آسان می کند. می توانید از ویژگی هایی مانند justify-content و align-item برای کنترل هم‌ترازی عناصر در امتداد محور اصلی و محور متقاطع استفاده کنید.
ویژگی های فلکس باکس به شما امکان می دهد طرح بندی های پیچیده و پویا را به راحتی ایجاد کنید، در حالیکه کد را ساده تر کرده و پاسخ دهی را بهبود می بخشد.
ویژگی های اصلی فلکس باکس چیست؟
حال که می دانید فلکس باکس چیست با ویژگی های آن نیز آشنا شوید.
- ظرف فلکس: ظرفی که همه اقلام فلکس را در خود جای می دهد.
- اقلام فلکس: عناصر فردی که ظرف را تشکیل می دهند.
- محور اصلی: محوری که اقلام فلکس در امتداد آن قرار می گیرند.
- محور متقاطع: محور عمود بر محور اصلی.
- جهت فلکس: جهت محور اصلی (از چپ به راست، راست به چپ، از بالا به پایین، از پایین به بالا).
- Flex grow: خاصیتی که تعیین می کند یک آیتم چقدر باید نسبت به سایر اقلام موجود در ظرف رشد کند.
- Flex shrink: خاصیتی که تعیین می کند یک آیتم چقدر باید نسبت به سایر اقلام موجود در ظرف کوچک شود.
- Flex based: خاصیتی که اندازه اولیه یک آیتم فلکس را قبل از شروع رشد یا کوچک شدن مشخص می کند.
- تراز کردن آیتم ها: خصوصیتی که تعیین می کند آیتم ها چگونه باید در امتداد محور متقاطع تراز شوند.
- Justify content: خاصیتی که تعیین می کند آیتم ها چگونه باید در محور اصلی تراز شوند.
- Flexbox ابزاری قدرتمند برای ساخت طرح بندی‌های پیچیده و واکنش‌گرا است و می‌تواند به ساده‌سازی فرآیند طراحی و کدنویسی یک صفحه وب کمک کند.
دستورات مربوط به فلکس باکس چیست؟
در ادامه به دستورات مربوط به flexbox می‌پردازیم که عبارتند از:
- flex-direction
- justify-content
- align-content
- align-items
- flex-wrap
- flex-grow
- flex-shrink
- flex-basis
- flex-flow
فلکس باکس چه امکاناتی برای شما فراهم می کند؟
Flexbox تعدادی ویژگی را ارائه می دهد که آن را به ابزاری قدرتمند برای ایجاد طرح بندی های انعطاف پذیر و پاسخگو تبدیل می کند. برخی از ویژگی های کلیدی آن عبارتند از:
طرح بندی انعطاف پذیر
با فلکش باکس (Flexbox) می توانید طرح بندی های انعطاف پذیری ایجاد کنید که می توانند با اندازه های مختلف صفحه نمایش و دستگاه ها سازگار شوند. می توانید از ویژگی هایی مانند flex-grow، flex-shrink و flex-basis برای کنترل نحوه گسترش و انقباض عناصر در چیدمان بر اساس فضای موجود استفاده کنید.
تراز آسان
Flexbox تراز کردن عناصر را در یک طرح، هم به صورت افقی و هم به صورت عمودی آسان می کند. می توانید از ویژگی هایی مانند justify-content و align-item برای کنترل تراز آیتم ها در امتداد محور اصلی و محور متقاطع استفاده کنید.
ترتیب مجدد عناصر
فلکس باکس به شما اجازه می دهد تا با استفاده از ویژگی order ترتیب عناصر را در یک طرح تغییر دهید. این امکان می تواند برای ایجاد طرح های واکنش گرا که ترتیب محتوا را در اندازه های مختلف صفحه نمایش تغییر می دهد، مفید باشد.
تودرتو
می توانید طرح بندی های Flexbox را درون یکدیگر قرار دهید که امکان طرح های پیچیده تر و لایه ای را فراهم می کند.
طرح بندی های شبکه ای
با ویژگی flex-wrap، می توانید طرح بندی های شبکه ای ایجاد کنید که در صورت نیاز، عناصر را روی خطوط جدید قرار می دهند. این امکان می تواند برای ایجاد طرح های واکنش گرا که با اندازه های مختلف صفحه نمایش تنظیم می شوند، مفید باشد.
فاصله پاسخگو
Flexbox با استفاده از ویژگی هایی مانند justify-content و align-item ایجاد فاصله پاسخگو بین عناصر را آسان می کند.
به طور کلی، Flexbox مجموعه‌ای قدرتمند از ابزارها را برای ایجاد طرح بندی های انعطاف‌پذیر، پاسخگو و مدرن در وب فراهم می کند.
کدام مرورگرها از flexbox پشتیبانی می کنند؟
فلکس باکس در مرورگرهای زیر پشتیبانی می شود:
- +Chrome 29
- +Firefox 28
- +Internet Explorer 11
- +Opera 17
- +Safari 6.1
- +Android 4.4
- +iOS 7.1
پشتیبانی از Flexbox بسته به نسخه مرورگر می تواند متفاوت باشد. برای اطمینان از اینکه چیدمان Flexbox شما در همه مرورگرها به درستی کار می کند، بهتر است سازگاری مرورگر با ویژگی های CSS را که استفاده می‌کنید بررسی کنید. می توانید از ابزارهایی مانند Can I Use برای بررسی سازگاری Flexbox و سایر فناوری های وب استفاده کنید.
همچنین باید گفت که نسخه های قدیمی اینترنت اکسپلورر (IE10 و نسخه های قبلی) از Flexbox پشتیبانی نمی کنند. اگر نیاز به پشتیبانی از این مرورگرها دارید، ممکن است لازم باشد از روش طرح بندی متفاوتی مانند شناورها یا جداول استفاده کنید. با این حال، مایکروسافت اعلام کرده است که نسخه های بعدی Edge از Flexbox پشتیبانی کامل خواهند کرد.
Flexbox برای چه طراحی هایی مناسب می باشد؟
Flexbox توسط سازمان W3C ارائه شد و در نگاه اول برای طراحی objectها در داخل صفحه مورد استفاده قرار می گیرد مانند طراحی بخش منوها در یک صفحه و نه کل صفحه.
دلیل اینکه از flexbox برای طراحی کل صفحه استفاده نمی کنند این است که flexbox همراه و در کنار زبان css می باشد. همچنین Grid layout برای طراحی کل ساختار یک صفحه وب سایت مورد استفاده قرار می گیرد. اما متاسفانه بسیاری از محدودیت ها می تواند در آن وجود داشته باشد. حتی آخرین ورژن از مرورگر گوگل کروم هم می تواند با آن مشکل داشته باشد.
مزایای استفاده از فلکس باکس چیست؟
- FlexBox نسبت به ویژگی های قبل از خود مثل float که قبلا به طور گسترده توسط طراحان وب استفاده می شد، اجازه می دهد کدهای استانداردتری نوشته شود که در مرورگرهای مختلف به خوبی کار کنند. این ماژول به جای تمرکز روی راه حل های پیچیده یا استفاده از ترفند هایی مثل CSS Hacks روی شفافیت طراحی تمرکز دارد.
- یکی از مشکلات رایج ویژگی float در css این است که با اضافه کردن المان و محتوای جدید به یک بخش از سطر یا ستون، ممکن است لایه بندی شما به هم ریخته و کل آن بخش خراب شود که با استفاده از display flex در css این مشکل حل خواهد شد.
- به کمک ویژگی flex در css قراردادن المان ها کنار یکدیگر در یک ردیف بدون نیاز به تعیین اندازه دقیق پهنا و هم تراز سازی نسبت به المان نگهدارنده امکان پذیر است.
- با استفاده از display flex در css تغییر ترتیب المان‌ها به آسانی امکان پذیر است.
- اگر برای عنصر هایی که در یک خط قرار گرفتن جای کافی نباشد به راحتی به کمک مقدار flex-wrap در css عنصر آخر به صورت خودکار در ردیف بعد قرار می گیرد.
- تعیین اندازه یک المان نسبت به اندازه المان نگهدارنده به‌صورت واکنش گرا ممکن است.
- به کمک مقادیر مرتبط با ویژگی Flex پشتیبانی از چیدمان معکوس نیز امکان پذیر است.
سخن پایانی
برای اینکه بتوانید به یک فرد حرفه ای در طراحی سایت تبدیل شوید لازم است که بدانید فلکس باکس چیست، چه کاربردهایی دارد و در کجا از این ویژگی باید استفاده کنید. به طور کامل در این مطلب به این موضوعات پرداخته شده است. می توانید با مطالعه این مقاله دانش خود را نسبت به موضوع flexbox در css افزایش دهید.
برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.
اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.
دیدگاهتان را بنویسید