هیچ دوره ای در سبد خرید شما وجود ندارد
در گذشته قرار دادن المان ها و آیتم ها در صفحه در مکان های دلخواه کار بسیار سختی بود و یکی از چالش های اصلی در برنامه نویسی وب بود. اما بعد از عرضه Flex Box این کار سخت به یک کار آسان و راحت تبدیل شد. Flex Box به برنامه نویسان این امکان را می دهد تا المان های مختلف را به راحتی در هر جایی که بخواهند قرار دهند. در دوره آموزش flexbox قصد داریم شما را به صورت کامل با فلکس باکس آشنا کنیم به نحوی که بتوانید به راحتی از آن در پروژه های خود استفاده کنید.
با Flexbox، طراحی صفحات وب دیگر پیچیده و زمانبر نخواهد بود و میتوانید بهسادگی ساختارهای انعطافپذیر و حرفهای ایجاد کنید. با ما دوره همراه باشید تا بهصورت گامبهگام و پروژهمحور یاد بگیرید چگونه از این مدل طراحی قدرتمند در CSS استفاده کنید.
در این دوره چه میآموزیم؟
در دوره آموزش flexbox شما به صورت کامل و پروژهمحور با Flexbox در CSS آشنا خواهید شد. یاد میگیرید که چگونه آیتمهای موجود در صفحه را در تمام جهات (چپ، راست، بالا و پایین) مرتب کنید و بهراحتی ابعاد و موقعیت آنها را مدیریت کنید. Flexbox به شما این امکان را میدهد که بدون نیاز به تعیین دقیق طول و عرض عناصر، آنها را به شکل استاندارد و ریسپانسیو در کنار یکدیگر قرار داده و چیدمان صفحه را بهینه کنید.
با Flexbox شما دیگر نگران بههمریختگی المانها هنگام اضافه کردن آیتم جدید نخواهید بود؛ چرا که این مدل طراحی بهخصوص در بحث ریسپانسیو، انعطافپذیری بالایی دارد و فرآیند طراحی را بسیار سادهتر میکند. در این دوره، شما مهارت نوشتن کدهای مرتب، استاندارد و کارآمد را کسب کرده و میتوانید چالشها و پروژههای عملی مختلفی را برای تسلط کامل بر این مبحث پیادهسازی کنید. جهت تکمیل فرایند یادگیری خود نیز میتوانید از وبسایت css-tricks برای آموزش flexbox استفاده کنید.
مسیر دوره آموزش flexbox
در دوره آموزش فلکس باکس ابتدا یک ادیتور انتخاب کرده و آن را نصب میکنیم. در ادامه منبع آموزش به شما معرفی میشود تا مستقیم به آن دسترسی داشته باشید و نحوه خواندن مطالب را یاد بگیرید و برای هر بخش از آموزش، مثال های عملی به شما داده میشود.
- display
- flex-row
- flex-direction
- justify-content
- lign-self
پروژههای عملی دوره
- پروژه کارت نمایش قیمت
- پروژه ساخت تاس
- پروژه گالری عکس کاملاً ریسپانسیو
- پروژه انتخاب پلن
- پروژه لندینگ پیج کامل
پیش نیازهای این دوره چیست؟
برای یادگیری فلکسباکس بهتر است که شما یک دانش پایهای از HTML و CSS داشته باشید، چون در این دوره به جزئیات این مباحث پایه پرداخته نمیشود. برای این منظور می توانید از دوره رایگان آموزش HTML و CSS در وبسایت دانشجویار استفاده کنید.
این دوره برای چه کسانی مناسب است؟
دوره آموزش flexbox در css به طور ویژه برای کسانی که به طراحی وب، توسعه وبسایتها و اپلیکیشنهای وب علاقه دارند، بسیار مناسب است. همچنین، افرادی که به css تسلط نسبی دارند و برای راحتی کار و همچنین کد استانداردتر نیاز به آموزش دارند، می توانند در این دوره شرکت کنند. اگر شما هم جزو این دسته از افراد هستید، این دوره میتواند برای شما بسیار مفید باشد.
چه نرم افزارهایی در این دوره استفاده شده است؟
در این دوره، از گوگل کروم به عنوان مرورگر اینترنت و از vs code به عنوان کد ادیتور استفاده شده است. البته شما میتوانید از هر مرورگر دیگری مثل فایرفاکس یا اپرا و همچنین از هر کد ادیتور دیگری که ترجیح میدهید، استفاده کنید. با این حال، به دلیل اینکه این دوره آموزش فلکس باکس از ویژوال استودیو کد استفاده میکند، پیشنهاد ما این است که شما هم از این نرمافزار استفاده کنید.
فلکس باکس (Flexbox) چیست؟
فلکس باکس (Flexbox) یک مدل طراحی قدرتمند در CSS است که به توسعهدهندگان وب کمک میکند تا المانهای صفحه را به شکل منعطف و مرتب در کنار هم قرار دهند.
قبل از ظهور فلکس باکس، لایهبندی و چیدمان المانها در CSS کار پیچیدهای بود و توسعهدهندگان مجبور بودند از تکنیکهایی float یا table layout استفاده کنند. اما با معرفی فلکس باکس در سال 2017 توسط W3C، این روند سادهتر و قابل کنترلتر شده است.
فلکس باکس به توسعهدهندگان اجازه میدهد تا المانهای صفحه را به راحتی جابجا کنند و به شکل منعطف در کنار هم قرار دهند. این امر باعث میشود طراحی صفحات وب سادهتر و منسجمتر شود و توسعهدهندگان بتوانند به راحتی تغییرات مورد نیاز را اعمال کنند.
پراپرتیهای فلکسباکس
فلکسباکس شامل دو دسته پراپرتی است:
1. Container Properties
این پراپرتیها به شما کمک میکنند که رفتار کانتینر خود را کنترل کرده و ارتباط آن با عناصر داخلش را مشخص کنید. در دوره آموزش flexbox، شما با مفاهیمی مانند flex-direction، justify-content، flex-wrap، align items و align content آشنا خواهید شد.
2. Flex Item Properties
این پراپرتیها به شما این امکان را میدهند که رفتار تکتک عناصر داخل کانتینر را به صورت جداگانه مدیریت کنید. در این بخش از دوره آموزش فلکس باکس، مفاهیمی مانند order، flex، flex-grow، flex-shrink و align self آموزش داده خواهد شد.
کاربردهای فلکس باکس
- طراحی و چیدمان انعطافپذیر المانها: فلکس باکس امکان چیدمان و جانمایی آسان المانهای صفحه را فراهم میکند. بهطوری که میتوان ابعاد، ترتیب و موقعیت المانها را به سادگی تنظیم کرد.
- ایجاد طرحبندی های چند ستونه: با استفاده از فلکس باکس میتوان طرحبندیهای چندستونه ایجاد کرد که در آنها المانها به صورت افقی و عمودی قرار میگیرند.
- توزیع فضای در دسترس: فلکس باکس امکان توزیع فضای در دسترس بین المانها را فراهم میکند، بهطوری که میتوان میزان فضا اختصاصیافته به هر المان را کنترل کرد.
- ترازکردن و همردیفکردن المانها: با استفاده از فلکس باکس میتوان المانها را به صورت عمودی و افقی تراز و همردیف کرد.
- تغییر ترتیب و جایگاه المانها: فلکس باکس امکان تغییر ترتیب و جایگاه المانها را فراهم میکند که این امر در طراحیهای پیچیده بسیار کاربردی است.
- سازگاری با ابعاد مختلف صفحه: فلکس باکس به طراحان امکان میدهد تا طرحبندی صفحه را با ابعاد مختلف صفحه سازگار کنند.
مزایای استفاده از Flexbox
- سادگی و انعطافپذیری در طراحی و چیدمان المانها
- امکان ایجاد طرحبندیهای پیچیده به راحتی
- کارایی بهتر در طراحیهای responsive
- کنترل بیشتر بر چگونگی توزیع فضا در بین المانها
مقایسه فلکس باکس و گرید
Flexbox و Grid هر دو رویکردهای مهمی در طراحی و چیدمان المانهای وب هستند، اما تفاوتهای کلیدی بین آنها وجود دارد.
فلکس باکس یک سیستم یکبعدی است که المانها را در یک ردیف یا ستون چیده و امکان کنترل اندازه و موقعیت آنها را فراهم میکند. این رویکرد برای طراحیهای سادهتر و چیدمانهای یکبعدی بسیار مناسب است. با استفاده از خواص فلکس مانند flex-grow و flex-shrink میتوان به راحتی اندازه المانها را تنظیم کرد. همچنین جهت چیدمان المانها (افقی یا عمودی) قابل تغییر است.
در مقابل، گرید یک سیستم دوبعدی است که المانها را در قالب یک شبکه از سطرها و ستونها چیده و امکان کنترل دقیقتر موقعیت و اندازه آنها را فراهم میکند. این رویکرد برای طراحیهای پیچیدهتر و چیدمانهای دوبعدی مناسبتر است. تعریف ابعاد ستونها و سطرها در گرید به طراح این امکان را میدهد که المانها را در هر جای دلخواه شبکه قرار دهد.
در مجموع، انتخاب هر یک از این رویکردها بستگی به نیازهای طراحی و پیچیدگی چیدمان دارد. آشنایی و آموزش flexbox و grid به طراحان وب کمک میکند تا بتوانند بهترین راهحل را برای هر پروژه انتخاب کنند.
شما می توانید در راستای بهبود کیفیت دوره آموزش flexbox ، نظرات، پیشنهادات و انتقادات خود را با ما در قسمت نظرات سایت در میان بگذارید.
کاربر دانشجوی دوره
سلام
در درجه اول تشکر میکنم بابت زمانی که گذاشته شده، یک انتقاد هم دارم در اصل اگر بخوایم جمع بندی کنی این دوره حداقل در قسمت پروژه ها آموزشی نبوده بلکه روخوانی کد بوده ، یعنی شما داری از مانیتور دوم ( احتمالا ) کد رو مینویسی همونی که مینویسی رو میخونی تمام! یعنی چرا این و نوشتی ؟ چطور شد، این شد! از کجا امد! نداریم، همونی که مینویسی رو میخونی تمام!
خوب اینو خود شخص هم می تونه ببینه چی نوشته شده مهم منطق پشتش که چطور کار میکنه.