یادتون میاد قبلا مرتب کردن عمودی محتوا در وسط وب سایت چقد کار مشکلی بود؟ الآن دیگه با وجود فلکس
باکس مجبور نیستیم اون همه مشقت و سختی رو تحمل کنیم.
CSS در اصل برای مدیریت صفحه بندی های پیچیده ای که این روزها روی وب ها میبینیم بوجود نیومده و بخاطر همین توسعه دهنده ها مجبورند برای اینکه محتواشون خوب به چشم بیاد دست به تغییر CSS بزنند.
فلکس باکس که از عبارت flexible boxes به معنی کادرهای انعطافپذیر گرفته شده، یه ماژول تقریبا جدیده که تو CSS3 طراحی شده و در مرتب سازی چیزهای روی سایت به وب مسترها کمک میکنه. این ماژول قابلیت مرتب سازی آیتم هایی با هر اندازه و هر نوع (حتی دینامیک) رو داره. مهمترین ویژگی اون تواناییش در تعیین عرض و ارتفاع هست که در نتیجه فضا رو به بهترین شکل ممکن و در نمایشگرهایی با اندازه های مختلف پر میکنه.
فلکس باکس چیست؟
فلکس باکس یکی از اولین ماژولهاییست که برای صفحه بندی واقعی طراحی شد و مدل سازی با CSS رو سادهتر و حتی در برخی موارد امکان پذیر کرد.
این ماژول برای ارتقای مدل کادربندی CSS طراحی شده و این کارو با انعطاف پذیر کردن کادرها و محتوای درونشون انجام میده. با استفاده از فلکس باکس میتونیم کادر و کادرهای درونیش رو به هر صورتی که بخواهیم مرتب کنیم، مثلا از چپ بچینیم یا از راست یا حتی از پایین یا بالا. میتونید ترتیب عناصر روی صفحه رو تعیین کنید و محتواتونو از راست به چپ ردیف کنید و یا به هر تعداد که بخواهید ستون به صفحه اضافه کنید. اندازه ها هم تا جایی که عناصر جا داشته باشند و فضا باشه، انعطاف پذیرند.
جالب اینجاست، با وجود اینکه فکلس باکس هنوز رسما جزء CSS3 نشده، همه مرورگرهای بزرگ از جمله اندروید و iOS ازش پشتیبانی میکنند.
کی برای صفحه بندی از فلکس باکس استفاده کنیم؟
بین صفحه بندی های چارخونه و این پیشرفتی که برای CSS حاصل شده یه تفاوت ظریفی هست که همین تفاوت کوچیک باعث میشه یکیش برای ساخت صفحه بندی های کامل مناسب تر باشه.
از نظر فنی فلکس باکس میتونه یه صفحه بندی کامل برای تم بسازه ولی در واقع کاراییش خیلی بیشتر از این هست. برای صفحه بندی کادرهای جدا روی صفحه – مثل قسمت محتوای اصلی، حاشیه صفحه، هدر و سایر قسمتهای مشابه روی صفحه – مناسبه. صفحه های چارخونه ای برای ایجاد یه طرح صفحه کامل ایده عالیه.
تفاوت ظریفی که گفتیم برمیگرده به مدل تعامل فلکس باکس با مرورگرهای بزرگی که کم کم صفحه رو بارگذاری میکنند. محتوایی که زودتر به نمایش درمیاد به صورت افقی کشیده میشه تا جایی که کل نمایشگر رو پر کنه. هر چی کادربندی های بیشتری لود میشن، نمایش تمام افقی خودشو باهاشون تطبیق میده و کوچیک میشه تا عناصر اطراف هم بتونن جا بشن.
یکی از توسعه دهنده های کروم به فلکس باکس نقد وارد کرده بود و گفته بود در دید کاربر، قالب یک دفعه از محتوایی که تمام صفحه رو پر کرده به اندازه واقعی – که ممکنه خیلی کوچیکتر باشه – میپره. این مسئله میتونه برای کاربرهایی که سرعت اینترنتشون پایینه مشکل درست کنه و تجربه کاربری سایت رو به خطر بندازه. بنابراین شاید بهتر باشه به جای فلکس باکس از چارخونه برای صفحه بندی استفاده کرد.
