امتیاز موضوع:
  • 42 رای - 2.1 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
طراحی سبک های جدید با Flex Box
نویسنده پیام
atlasweb آفلاین
کاربر تازه وارد
*

ارسال‌ها: 1
تاریخ عضویت: Nov 2015
اعتبار: 0
.وضعیت من: هیچکدام
ارسال: #1
طراحی سبک های جدید با Flex Box
اجازه بدهید در ابتدا به شما بگویم که یاد گرفتن و استفاده از 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 مطرح شده است ممکن است در ابتدا پیچیده به نظر بیاید. 
منبع: طراحی سایت
11-12-2015، 08:05 PM
ارسال‌ها پاسخ
bahab آفلاین
کاربر تازه وارد
*

ارسال‌ها: 2
تاریخ عضویت: Dec 2015
اعتبار: 0
.وضعیت من: هیچکدام
ارسال: #2
RE: طراحی سبک های جدید با Flex Box
سپاسگزارم پیمان جان. مطلب جالبی بودش
دستگاه تصفیه آب
12-11-2015، 10:00 PM
ارسال‌ها پاسخ
farabilab آفلاین
کاربر تازه وارد
*

ارسال‌ها: 1
تاریخ عضویت: Nov 2016
اعتبار: 0
.وضعیت من: هیچکدام
ارسال: #3
RE: طراحی سبک های جدید با Flex Box
سپاسگزار کاش بازم مطلب بذارین
11-11-2016، 12:44 AM
وب‌سایت ارسال‌ها پاسخ
shopintex آفلاین
کاربر تازه وارد
*

ارسال‌ها: 4
تاریخ عضویت: Jan 2017
اعتبار: 0
.وضعیت من: هیچکدام
ارسال: #4
RE: طراحی سبک های جدید با Flex Box
سپاسگزار
01-05-2017، 01:23 AM
وب‌سایت ارسال‌ها پاسخ
ratin آفلاین
کاربر تازه وارد
*

ارسال‌ها: 1
تاریخ عضویت: Jul 2017
اعتبار: 0
.وضعیت من: هیچکدام
ارسال: #5
RE: طراحی سبک های جدید با Flex Box
درود سپاسگزار از توضیحات مفید و سایت پر محتواتون
07-25-2017، 12:07 PM
ارسال‌ها پاسخ
artor آفلاین
کاربر تازه وارد
*

ارسال‌ها: 1
تاریخ عضویت: Sep 2017
اعتبار: 0
.وضعیت من: هیچکدام
ارسال: #6
RE: طراحی سبک های جدید با Flex Box
سپاس از سایت خوبتون . 

ادکلن  -  عطر  -  فروشگاه اینترنتی
09-27-2017، 07:06 PM
ارسال‌ها پاسخ
netback آفلاین
کاربر تازه وارد
*

ارسال‌ها: 5
تاریخ عضویت: Oct 2017
اعتبار: 0
.وضعیت من: هیچکدام
ارسال: #7
RE: طراحی سبک های جدید با Flex Box
درود عالی بود
انجام پروژه متلب
10-25-2017، 10:26 PM
ارسال‌ها پاسخ
matlabi آفلاین
کاربر تازه وارد
*

ارسال‌ها: 1
تاریخ عضویت: Dec 2017
اعتبار: 0
.وضعیت من: هیچکدام
ارسال: #8
RE: طراحی سبک های جدید با Flex Box
بسیار عالی
انجام پروژه متلب
12-27-2017، 01:16 PM
وب‌سایت ارسال‌ها پاسخ
hamipaper آفلاین
کاربر تازه وارد
*

ارسال‌ها: 1
تاریخ عضویت: Jan 2018
اعتبار: 0
.وضعیت من: هیچکدام
ارسال: #9
RE: طراحی سبک های جدید با Flex Box
01-10-2018، 09:37 PM
ارسال‌ها پاسخ


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  طراحی سایت در سال ۲۰۱۸ forouzan99 0 27 02-18-2018، 01:18 PM
آخرین ارسال: forouzan99
  نقش شبکه های اجتماعی در طراحی سایت forouzan99 0 25 02-18-2018، 01:13 PM
آخرین ارسال: forouzan99
  طراحی سایت صرافی mohi72 0 50 02-15-2018، 01:03 PM
آخرین ارسال: mohi72
  قیمت طراحی سایت sanatech 0 61 02-04-2018، 02:41 PM
آخرین ارسال: sanatech
  طراحی فروشگاه اینترنتی mohi72 0 85 01-30-2018، 03:34 PM
آخرین ارسال: mohi72
  طراحی وب سایت کشاورزی sitecode 0 89 01-26-2018، 10:02 PM
آخرین ارسال: sitecode
  طراحی سایت حرفه ای mohi72 0 121 12-24-2017، 11:36 AM
آخرین ارسال: mohi72
  اولین قدم برای طراحی سایت حرفه ای mohi72 0 131 12-17-2017، 11:03 AM
آخرین ارسال: mohi72
  نقش طراحی سایت در کسب و کار mohi72 0 170 12-11-2017، 02:05 PM
آخرین ارسال: mohi72
  طراحی سایت شرکتی mohi72 0 206 11-21-2017، 01:05 PM
آخرین ارسال: mohi72

پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان

تماس با ما | ParsiCoders (Persian Team) For Programming ,Security,Cracking,Network,Pars Civilization,Medical,Science,Entertaining | بازگشت به بالا | | حالت آرشیو | پیوند سایتی RSS
This forum uses Lukasz Tkacz MyBB addons.