مقدمه ای بر CSS Flexbox

Introduction To CSS Flexbox

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: دوره ای طراحی شده تا به شما یک دید کلی در استفاده از CSS Flexbox برای طراحی صفحات وب HTML شما بدهد. نمای کلی از Flexbox نحوه استفاده از ویژگی های مختلف که برای یک کانتینر flex والد اعمال می شود نحوه استفاده از ویژگی های مختلف که برای یک آیتم flex کودک اعمال می شود نحوه استفاده از اصول Flexbox برای طراحی صفحه وب HTML پیش نیازها: درک اولیه HTML و CSS. یک مرورگر وب مورد نیاز است. ما از Google Chrome استفاده خواهیم کرد و گهگاه از ابزار توسعه Chrome استفاده خواهیم کرد. یک ویرایشگر کدنویسی مورد نیاز است. ما از VS Code با افزونه Live Server استفاده خواهیم کرد.

هدف این دوره کمک به شما در ارتقای طراحی صفحه وب HTML با استفاده از بسیاری از ویژگی های ارائه شده توسط مدل طرح بندی Flexbox است. در این دوره، هم ویژگی‌هایی را که می‌توان به یک ظرف انعطاف‌پذیر والد اعمال کرد و هم ویژگی‌هایی را که می‌توان برای یک آیتم فلکس فرزند اعمال کرد، بررسی خواهیم کرد.

خصوصیات کانتینر Parent Flex که مورد بررسی قرار خواهند گرفت عبارتند از:

جهت فلکس - جهتی را که می‌خواهید موارد را در داخل محفظه والد flex خود نمایش دهید، بدانید، چه به صورت ستونی یا یک ردیفی

Flex Wrap - با گزینه های موجود برای بسته بندی اقلام در ظرف انعطاف پذیر خود آشنا شوید

Flex Flow - بیاموزید که چگونه با استفاده از این ویژگی مختصر، کاربردهای Flex Direction و Flex Wrap را ساده کنید

توجیه محتوا - گزینه های موجود برای سازماندهی موارد Flex خود را بر اساس محور اصلی کاوش کنید

تراز کردن موارد - گزینه های موجود برای سازماندهی موارد انعطاف پذیر خود را بر اساس محور متقاطع کاوش کنید

تراز کردن محتوا - گزینه های موجود برای کنترل نحوه سازماندهی هر یک از خطوط انعطاف پذیر شما در امتداد محور متقاطع را کاوش کنید

ویژگی های Child Flex Item که به آنها پرداخته خواهد شد عبارتند از:

Flex Bassis - کشف کنید که چگونه می توانید عرض یا ارتفاع اولیه را با استفاده از این ویژگی روی یک مورد انعطاف پذیر تعیین کنید

Flex Grow - بیاموزید که چگونه می توانید با استفاده از این ویژگی اندازه موارد فلکس خود را افزایش دهید

Flex Shrink - کاوش کنید که چگونه اقلام flex را می توان کوچک کرد زیرا ظرف اصلی با استفاده از این ویژگی تنظیم می شود

Flex - بیاموزید که چگونه با استفاده از این ویژگی مختصر، استفاده از Flex Basis، Flex Grow و Flex Shrink را ساده کنید

Order - بیاموزید که چگونه می توانید ترتیب اقلام انعطاف پذیر را با استفاده از این ویژگی تغییر دهید

Align Self - کشف کنید که چگونه می توانید به صورت جداگانه برای هر یک از موارد انعطاف پذیر در یک ظرف انعطاف پذیر یک تراز تنظیم کنید



سرفصل ها و درس ها

معرفی Introduction

  • مقدمه ای بر فلکس باکس Introduction To Flexbox

  • نمای کلی Flexbox Overview Of Flexbox

  • یادداشت های اضافی Additional Notes

بررسی اجمالی خواص کانتینر Flex Parent Overview Of Parent Flex Container Properties

  • مشخصات اجمالی کانتینر Flex Parent Parent Flex Container Properties Overview

جهت فلکس Flex Direction

  • نمای کلی جهت فلکس Flex Direction Overview

  • نمایش جهت فلکس Flex Direction Demonstration

  • اطلاعات اضافی در مورد فلکس جهت Additional Information On Flex Direction

فلکس راپ Flex Wrap

  • نمای کلی Flex Wrap Flex Wrap Overview

  • نمایش Flex Wrap Flex Wrap Demonstration

  • اطلاعات اضافی در مورد Flex Wrap Additional Information On Flex Wrap

فلکس فلو Flex Flow

  • بررسی اجمالی جریان فلکس Flex Flow Overview

  • نمایش جریان فلکس Flex Flow Demonstration

مطالب را توجیه کنید Justify Content

  • توجیه اجمالی محتوا Justify Content Overview

  • توجیه محتوا Justify Content Demonstration

تراز کردن موارد Align Items

  • نمای کلی موارد را تراز کنید Align Items Overview

  • نمایش موارد تراز کنید Align Items Demonstration

تراز کردن محتوا Align Content

  • تراز کردن نمای کلی محتوا Align Content Overview

  • تراز کردن نمایش محتوا Align Content Demonstration

بررسی اجمالی ویژگی های آیتم Child Flex Overview Of Child Flex Item Properties

  • بررسی اجمالی ویژگی های آیتم Child Flex Child Flex Item Properties Overview

پایه فلکس Flex Basis

  • بررسی اجمالی پایه فلکس Flex Basis Overview

  • نمایش پایه فلکس Flex Basis Demonstration

  • اطلاعات اضافی بر اساس فلکس Additional Information On Flex Basis

فلکس گرو Flex Grow

  • بررسی اجمالی Flex Grow Flex Grow Overview

  • نمایش Flex Grow Flex Grow Demonstration

  • اطلاعات اضافی در مورد Flex Grow Additional Information On Flex Grow

فلکس شرینک Flex Shrink

  • نمای کلی Flex Shrink Flex Shrink Overview

  • نمایش فلکس شرینک Flex Shrink Demonstration

  • اطلاعات اضافی در مورد Flex Shrink Additional Information On Flex Shrink

فلکس Flex

  • نمای کلی فلکس Flex Overview

  • نمایش فلکس Flex Demonstration

سفارش Order

  • نمای کلی سفارش Order Overview

  • نمایش سفارش Order Demonstration

خود را تراز کنید Align Self

  • نمای کلی خود را تراز کنید Align Self Overview

  • تظاهرات خود را تراز کنید Align Self Demonstration

مثال پروژه با استفاده از Flexbox Project Example Using Flexbox

  • مثال پروژه با استفاده از Flexbox Project Example Using Flexbox

نمایش نظرات

مقدمه ای بر CSS Flexbox
جزییات دوره
1.5 hours
35
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
1,064
3.9 از 5
دارد
دارد
دارد
Joshan Grewal
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Joshan Grewal Joshan Grewal

توسعه دهنده وب سایت