آموزش رايگان Flexbox در CSS

وضعیت موجودی: موجود
1 رای
برند: Welearn

Flexbox تکنولوژی جدیدی در CSS است که توسط W3C برای رفع مشکلات استفاده از کدهای float و طراحی زیبا و دقیق‌تر سایتهای ریسپانسیو ارائه شده است. پس از منسوخ شدن استفاده از جدولها در طراحی قالب سایت، استفاده از float برای صفحه‌بندی عناصر کاربرد بسیاری پیدا کرد، اما به مرور طراحان با ضعفها و عدم انعطاف پذیری float در طراحی صفحات مواجه شدند.

QR

آموزش رايگان Flexbox در CSS

Flexbox تکنولوژی جدیدی در CSS است که توسط W3C برای رفع مشکلات استفاده از کدهای float و طراحی زیبا و دقیق‌تر سایتهای ریسپانسیو ارائه شده است. پس از منسوخ شدن استفاده از جدولها در طراحی قالب سایت، استفاده از float برای صفحه‌بندی عناصر کاربرد بسیاری پیدا کرد، اما به مرور طراحان با ضعفها و عدم انعطاف پذیری float در طراحی صفحات مواجه شدند.

استفاده از Flexbox باعث می‌شود به جای تعریف خصوصیات هر عنصر به صورت مجزا، برای آنها به صورت گروهی یک استایل تعریف کنیم. در واقع در حال حاضر استفاده از Flexbox بهترین گزینه برای برای موقعیت‌دهی آبجکتهای درون صفحات وب است. علاوه بر آن استفاده از Flexbox تاثیر بسزایی در index صفحات سایت توسط موتورهای جستجو دارد و در نتیجه در سئوی سایت نیز موثر است.

اگر با صفحه آرایی امروزی آشنا باشید قطعا با مشکل Float که به وسیله تکنیک Clearfix حل می شود دست و پنجه نرم کرده اید و حتی از مشکل whitespace  که در صفحه آرایی با inline-block به وجود می آید آگاهی دارید.

خبر خوب اینکه CSS3  ماژولی برای صفحه آرایی دارد که نه تنها مشکلات قبلی را کنار می زند بلکه ویژگی های بسیار چشم گیر و کاربردی را فراهم می کند. این ماژول Flexible Box یا Flexbox نام دارد.

 

برخی از امکانات فلکس باکس

  • چیدن عنصرها در یک ردیف کنار هم بدون نیاز به تعیین عرض مشخص و دقیق برای آنها
  • اگر برای عنصرهایی که در یک خط قرار گرفتن جای کافی نباشد به راحتی عنصر آخر به صورت خودکار در ردیف بعد قرار می گیرد.
  • به سرعت می توان چیدمان عنصرهای کنار هم را از افقی به عمودی و بالعکس عوض کرد.( فقط با تغییر یه کلمه )
  • همتراز سازی چپ, راست و مرکز نسبت به عنصر نگهدارنده
  • امکان تغییر ترتیب عنصرها بدون دست کاری در HTML ( این یکی واقعا خیلی عالیه )
  • تعیین کردن اندازه ی عنصر نسبت به اندازه ی عنصر نگهدارنده بدون نگران بودن در مورد واحد اندازه ی عنصر نگهدارنده و تغییرات viewport ( پنجره مرورگر)

 

توسط مجموعه آموزشی کوتاه آموزش Flexbox در CSS با این تکنولوژی قدرتمند و روش استفاده از آن در طراحی صفحات وب استاندارد و صفحه‌بندی بهینه عناصر آن آشنا خواهید شد.

آنچه در این مجموعه خواهید آموخت:

  • معرفی Flexbox و تفاوت آن با Float
  • آشنایی با display:flex در Flexbox
  • آشنایی با flex-direction در فلکس‌باکس
  • آشنایی با justify-content در فلکس‌باکس
  • آشنایی با align-items در Flexbox
  • آشنایی با flex-wrap
  • آشنایی با order , flex-flow

آموزش رايگان Flexbox در CSS

مشخصات فيلم آموزشي
زمان آموزش: 30 دقيقه
شيوه آموزش : مالتي مديا
سطح آموزش : متوسطه
زبان آموزش : فارسي
مدرس: علي مظلوم
حجم فايل: 26MB
كيفيت ويدئو : FULL HD
ابعاد ويدئو : 1280x720
تاريخ انتشار: 6 اردیبهشت 1398
منبع: سافت سرا - این سری آموزشی توسط وب سایت welearn به صورت رایگان عرضه شده است.
پسورد فايل فشرده: softsara.ir
برند: Welearn
کد محصول: 204

فيلم آموزشي رايگان آموزش رايگان Flexbox در CSS

نظرات کاربران درباره آموزش رايگان Flexbox در CSS

نظری در مورد این محصول توسط کاربران ارسال نگردیده است.
اولین نفری باشید که در مورد آموزش رايگان Flexbox در CSS نظر می دهد.

ارسال نظر درباره آموزش رايگان Flexbox در CSS

لطفا توجه داشته باشید که ایمیل شما منتشر نخواهد شد.