اجازه بدهيد در ابتدا به شما بگويم كه ياد گرفتن و استفاده از flexbox بسيار ساده ميباشد. اين سبك تازه و مدرن در زبان CSS بيشتر براي مشكلات Float و Block آبجكتها در داخل صفحه به وجود آمده است. من شنيده ام كه بسياري از طراحان وب سايت گفته اند كه flexbox بسيار پيچيده و مشكل ميباشد. ولي اين رو بارها و بارها به خود بگوييد كه ياد گرفتن flexbox بسيار ساده ميباشد.
يكي از تكنيك هاي ياد گرفتن flexbox اين است كه همه چيز بسيار روشن و شفاف باشد. در ابتدا ما ميخواهيم بگوييم كه flexbox چيست و چرا به وجود آمده است.
FLEXBOX چيست؟
Flexbox يا همان Flexible Box Layout Model هم ناميده ميشود, به مجموعه اي از قوانين CSS گفته ميشود كه ميتواند طراحي و چيدمان را براي حالتهاي Responsive بسيار راحتتر نمايد.
Flexbox يكي از اولين تكنيك هاي css ميباشد كه در دنياي مدرن وب امروزه مورد استفاده قرار ميگيرد. اين كاملا منصفانه و درست است كه بگوييم تا قبل از معرفي شدن flexbox هيچ تكنيك مطمئن و معتبري براي پياده سازي وب سايت هاي ريسپانسيو وجود نداشته است.
بسياري از روشهاي هك در CSS براي اين چنين كارهايي وجود داشته است مانند display: inline-block و مانند اينها. اما همه اينها در وب سايت هاي ريسپانسيو مشكلاتي را هم داشته اند. به همين دليل ميباشد كه بسياري از وب سايت ها هنوز هم از زبان جاوا اسكريپت براي ريسپانسيو نمودن استفاده مينمايند كه امروزه امري بيهوده به نظر ميرسد.
Flexbox براي چه طراحي هايي مناسب ميباشد؟
Flexbox توسط سازمان W3C ارائه شد و در نگاه اول براي طراحي آبجكتها در داخل صفحه مورد استفاده قرار ميگيرد مانند طراحي بخش منوها در يك صفحه و نه كل صفحه.
دليل اينكه از flexbox براي طراحي كل صفحه استفاده نمي نمايند اين است كه flexbox همراه و در كنار زبانcss ميباشد كه معمولا با نام تخصصي Grid Layout Module در بين طراحان نيز شناخته ميشود. Grid layoutبراي طراحي كل ساختار يك صفحه وب سايت هم ميتواند مورد استفاده قرار بگيرد. اما متاسفانه بسياري از محدوديتها ميتواند در آن وجود داشته باشد. حتي آخرين ورژن از مرورگر گوگل كروم هم ميتواند با آن مشكل داشته باشد.
Styling components
Flexbox براي طراحي و دادن Style به بسياري از عناصر و آبجكتها در صفحه وب سايت مناسب ميباشد. چنانچه از قدرت اصلي flexbox استفاده نماييد, ميتواند به بسياري از روش هاي ديگر برتري داشته باشد. بطوريكه توسطflexbox ميتوانيد به جاي فرمت دهي تك تك آبجكتها, آنها را به صورت گروه درآورده و style مورد نظر را به آنها بدهيد.
زماني كه از flexbox استفاده مينماييم به ندرت احتياج خواهيد داشت تا به صورت انفرادي آيتم ها در داخل صفحه وب را موقعيت دهي نماييد. يكي از بهترين گزينه ها براي موقعيت دهي آبجكت ها در داخل صفحه وب سايت محسوب ميشود. يكي ديگر از مزيت هاي ديگر flexbox براي كنترل موقعيت دهي مجموعه اي از آيتم ها در كنار يكديگر ميباشد.
به طور مشخص flexbox به دو بخش اساسي تقسيم بندي ميشود. دسته اول خصوصيت هايي كه به آبجكت هاي Container نسبت داده ميشود و دسته دوم خصوصيت هايي كه به آبجكت هاي داخلي يا Child آنها نسبت داده ميشود.
پشتيباني مرورگرها
پشتيباني در مرورگرها سوال بسيار مهم و البته پيچيده اي ميباشد. اين مسئله ميتواند بسيار پيچيده باشد چراكه flexbox داراي چندين نوع نوشتاري و ساختار ميباشد. در ابتدا بعضي از شركت هاي ارائه دهنده مرورگرها در پشتيباني از flexbox مردد بودند و به همين دليل چند ورژن از flexbox به وجود آمد.
خوشبختانه توسط CSS Browser Prefix ميتوانيم از بسياري از قابليتهاي آن حتي در مرورگرهاي قديمي هم استفاده نماييم. بر طبق گزارشهاي سايت caniuse.com تنها مرورگر IE9 كمي مشكلاتي را به وجود آورده است.
خوب پشتيباني نشدن Flex Box در مرورگر IE9 چندان مهم نميباشد و براي بسياري از كاربران و طراحان وب سايت هميشه بدون سر و صدا و حاشيه بوده است.
نسخه هاي مختلف flexbox
از همكاري و هماهنگي بين بسياري از سازمان ها و شركت ها و كمپاني هاي مرورگرها تشكر مينماييم. هم اكنون بسياري از مرورگرها به خوبي بسياري از قابليتهاي flexbox را پشتيباني مينمايند.
در حال حاضر سه ورژن از flexbox وجود دارد كه شما طراحان وب سايت بايد از آنها اطلاع داشته باشيد.
ورژن قديمي
ورژن مياني
ورژن جديد
نسخه هاي مختلف مرورگرها ورژن هاي متفاوتي از flexbox را پشتيباني مينمايند. به عنوان مثال مرورگر IE10نوع ورژن مياني را پشتيباني ميكند.
بر طبق اصول نوشتن CSS Browser Prefix ميتوانيم flexbox را از مرورگرهاي قديمي تا مرورگرهاي جديد بنويسيم. با وجود اينكه مرورگرهايي كه ورژن هاي جديد را پشتيباني مينمايند ديگر دستورات ورژن قديميflexbox را نخواهند خواند.
رمز و راز فهميدن flexbox
مهم اين است كه متوجه شويد هميشه flexbox ربطي به box بودن آبجكت ها در داخل صفحه ندارد. تا به حال تمامي طراحي در صفحات وب سايت بر اساس محور x و y بيان شده است.
به ياد داشته باشيد flexbox از نوع vector ميباشد. به اين معنا كه براي استفاده از آن كافي است به طول و درجه آن اشاره نماييد. ميتوانيد بدون تاثير گذاشتن بر روي طول آبجكت ها زاويه آنها را تغيير دهيد و بالعكس.
از نگاه ديگر بسياري از مفاهيم جديد كه در flexbox مطرح شده است ممكن است در ابتدا پيچيده به نظر بيايد.
چه چيزهايي را بايد و نبايد در طراحي وب سايت انجام دهيم؟