جلسه ۰۱ : فلکس باکس چیست و چه ویژگی هایی دارد؟

• جزئیات
• نوع محتواآموزشی

سلام به همه پی وی لرنی های عزیز!
به دوره آموزش فلکس باکس Flexbox خوش آمدید!
در طراحی وب از زبان CSS طراحی و زیباتر کردن صفحات استفاده می شود اما گاهی، طراحی برخی از موارد بسیار دشوار می شود و استفاده از CSS را سخت می کند. اما خوشبختانه برای هر مشکلی راه حلی وجود دارد و برای این مشکل هم از یک روش عالی، آسان و ساده و در عین حال کاربردی استفاده می شود و آن چیزی نیست جز فلکس باکس Flexbox.
فلکس باکس یک حالت چیدمان CSS3 است. با استفاده از این حالت می توانید به راحتی طرح هایی برای برنامه های پیچیده و صفحات وب ایجاد کنید. طرح فلکس باکس کنترل کاملی بر جهت، تراز، ترتیب و غیره دارد. در این آموزش قصد داریم نحوه استفاده از ویژگی های مختلف موجود در فلکس باکس را بیاموزیم.
در این جلسه که اولین جلسه از این دوره است می خواهیم بدانیم که فلکس باکس چیست و بعد از پاسخ به این سوال به این موضوع بپردازیم که ویژگی های فلکس باکس چه مواردی هستند و چرا استفاده از فلکس باکس مفید است.

فلکس باکس چیست ؟

CSS یک زبان طراحی ساده است که از آن می توان برای طراحی صفحات وب استفاده کرد. CSS نوع و ظاهر یک صفحه وب را کنترل می کند.
با استفاده از CSS می توانید رنگ متن، استایل فونت ها، فاصله بین پاراگراف ها، نحوه اندازه گیری ستون ها و چیدمان ها، را چه برای تصاویر و چه برای رنگ های پس زمینه را تنظیم کنید و  طرح های چیدمان، تغییرات در صفحه نمایش برای دستگاه های مختلف و اندازه صفحه نمایش را کنترل کنید.

برای تعیین موقعیت و ابعاد باکس ها، در CSS می توانید از یکی از حالت های طرح بندی موجود استفاده کنید:

طرح بلوک – The block layout

از این حالت در تهیه اسناد استفاده می شود.

طرح بندی درون خطی – The inline layout

از این حالت در ترسیم متن استفاده می شود.

چیدمان جدول – The table layout

از این حالت در چیدمان جداول استفاده می شود.

طرح جدول – The table layout

از این حالت در موقعیت یابی عناصر استفاده می شود.

همه این حالت ها برای تراز کردن عناصر خاص مانند اسناد  متن، جداول و غیره استفاده می شوند، با این حال، هیچ یک از این ها راه حل کاملی برای تهیه وب سایت های پیچیده ارائه نمی دهد. این جاست که فلکس باکس Flexbox وارد میدان می شود.

Flexbox چیست؟

علاوه بر حالت هایی که معرفی کردیم؛ CSS3 حالت چیدمان دیگری را برای Flexible Box فراهم می کند، که معمولاً به آن Flexbox گفته می شود. با استفاده از این حالت می توانید به راحتی طرح هایی برای برنامه های پیچیده و صفحات وب ایجاد کنید. برخلاف floats، طرح Flexbox کنترل کاملی بر جهت، تراز ، ترتیب، اندازه و اندازه باکس ها می دهد.

ویژگی های فلکس باکس

جهت – Direction

شما می توانید موارد را در یک صفحه وب به هر جهت مانند چپ به راست، راست به چپ، بالا به پایین و پایین به بالا ترتیب دهید.

ترتیب – Order

با استفاده از فلکس باکس می توانید ترتیب مطالب یک صفحه وب را دوباره مرتب کنید.

پیچاندن – Wrap

در صورت عدم وجود فضای متناقض برای محتوای یک صفحه وب (به صورت تک خط) ، می توانید آنها را به چند خط (هم به صورت افقی) و هم به صورت عمودی بپیچانید.

تراز کردن – Alignment

با استفاده از فکلس باکس، می توانید محتوای صفحه وب را با توجه به ظرف آنها تنظیم کنید.

Resize – تغییر اندازه

با استفاده از فکلس باکس می توانید اندازه موارد موجود در صفحه را افزایش یا کاهش دهید تا در فضای موجود قرار بگیرد.

پشتیبانی از مرورگرها

فکلس باکس در مرورگرهای زیر پشتیبانی می شوند:

• +Chrome 29
• +Firefox 28
• +Internet Explorer 11
• +Opera 17
• +Safari 6.1
• +Android 4.4
• +iOS 7.1

سخن پایانی

در این جلسه آموختیم که فلکس باکس چیست و در کنار آن با ویژگی های فلکس باکس آشنا شدیم.
در جلسه آینده با نگهدارنده های فلکس آشنا می شویم.
با پی وی لرن همراه باشید.