آموزش تسلط بر CSS Flexbox: همه چیز را در مورد Flexbox بیاموزید و طرح‌بندی‌های عالی بسازید
Mastering CSS Flexbox: Learn Everything About Flexbox & Build Awesome Layouts
اگر در حال یادگیری توسعه وب front-end هستید و با CSS Flexbox مبارزه می کنید، این کلاس برای شما مناسب است!
من خودم یک توسعه دهنده خودآموخته هستم و در درک مفاهیم CSS Flexbox بسیار مشکل داشتم. اما بعد از اینکه flexbox را یاد گرفتم، فهمیدم که در واقع بسیار آسان است. و هنگام کار با طرح‌بندی‌ها و ترازها در پروژه‌های توسعه وب، بسیار مفید است.
در این کلاس یاد خواهید گرفت:
- همه مفاهیم اولیه CSS Flexbox
- نحوه اجرای واقعی دانش در پروژه های دنیای واقعی خود با مثال
- نحوه ایجاد طرح‌بندی‌های مختلف با استفاده از Flexbox
- نحوه تغییر ترازها بر اساس اندازه صفحه
- و بیشتر...
شما ایجاد خواهید کرد:
- طرح‌بندی وب‌سایت واقعی با استفاده از دانش این کلاس.
من این کلاس را برای مبتدیان مطلق طراحی و ایجاد کردم. حتی اگر هیچ دانشی در مورد CSS Flexbox ندارید، یادگیری و پیاده سازی آن در پروژه بعدی خود بسیار آسان است!
محبوب ترین طرح وب سایت را با استفاده از css flexbox ایجاد کنید!
در اینجا طرحی است که می خواهید برای این پروژه کلاس ایجاد کنید. این دارای محبوب ترین ساختار مورد استفاده در طراحی وب است - مطالب در سمت چپ، و یک نوار کناری در سمت راست.
مراحل:
- همه چیز را داخل یک div بپیچید و از حداکثر عرض استفاده کنید و از margin auto استفاده کنید تا آن را در مرکز بدن قرار دهید.
- قبل از ایجاد طرح بندی برنامه ریزی کنید.
- ابتدا آن را به 2 قسمت تقسیم کنید - یکی برای محتوای سمت چپ و 1 برای نوار کناری. کانتینر آنها را به یک فلکس باکس تبدیل کنید تا آنها را تراز کنید.
- همچنین، می‌توانید از حداکثر عرض با نوار کناری برای باریک‌تر کردن آن استفاده کنید.
- فراموش نکنید که از پرس و جوهای رسانه css برای پاسخگو کردن آن استفاده کنید!
ابتدا آن را امتحان کنید. می توانید از ویرایشگر کد خود استفاده کنید یا می توانید برای انجام این پروژه از آن استفاده کنید. فقط می توانید یک قلم جدید ایجاد کنید و در آنجا شروع به کدنویسی کنید.
شما می توانید این کار را به روش های مختلف انجام دهید. من این کار را انجام می دادم -
اما صبر کنید، قبل از اینکه خودتان آن را ایجاد کنید، کد من را نبینید.
پس از اتمام پروژه خود، یک اسکرین شات از مرورگر خود بگیرید و آن را در گالری پروژه به اشتراک بگذارید.
موفق باشید!
درس ها Lessons
-
تراز کردن در امتداد محور متقاطع: آیتم‌ها Alignment Along The Cross Axis: align-items
-
مثال دنیای واقعی: ترتیب را در نمایشگر کوچکتر تغییر دهید Real-World Example: Change The Order in Smaller Display
-
تراز اقلام چند خطی: align-content Alignment of Multiline Items: align-content
-
سفارش اقلام فلکس Order of The Flex Items
-
معرفی Introduction
-
بسته بندی یا نوراپ! Wrap or Nowrap!
-
تراز در امتداد محور فلکس: توجیه محتوا Alignment Along The Flex Axis: justify-content
-
جهت فلکس The Flex Directions
-
فاصله بین اقلام فلکس: شکاف Space Between The Flex Items: gap
-
مثال دنیای واقعی: مرکز کردن یک بخش Real-World Example: Centering A Div
-
ایجاد یک فلکس باکس Creating A Flexbox
-
یک مورد خاص را متفاوت تراز کنید: خود را تراز کنید Align A Particular Item Differently: align-self
-
توزیع فضاهای اضافی: flex-grow Distribution of Extra Spaces: flex-grow
-
تغییر اندازه پیش فرض بر اساس انعطاف پذیری Changing The Default Size by flex-basis
https://donyad.com/d/f5aa7c
Sofiullah Chowdhury
توسعه دهنده وب و طراح UI/UX
نمایش نظرات