یکی از موارد بسیار مهم در طراحی صفحات وب صفحه آرایی یا همان تکنیک چیدمان عناصر در صفحه می باشد. بعد از سال ها بالاخره سی اس اس ماژولی را معرفی کرد که فوق العاده انجام صفحه آرایی را ساده، سریع، انعطاف پذیر و قدرتمند می کند.
این ماژول، فلکس باکس (Flexbox) نام دارد و این روزها می توان در پروژه های تجاری نیز از آن بهره گرفت.
با توجه به اهمیت فلکس باکس دوره آموزشی جامعی را بصورت تصویری برای کاربران آماده کردیم تا بتوانند هرچه سریع تر و بهتر این روش را فراگرفته و به کار گیرند.
پیش نیاز
برای گذراندن این دوره نیاز است که مفاهیم اولیه سی اس اس را بخوبی بدانیم. این یعنی به مطالب فصل اول تا هفت لیست آموزشی مسلط باشیم.
معرفی دقیق تر دوره
در این دوره مطالب در سه فصل مجزا ارایه شدند و هر فصل هدف خاصی را دنبال می کند.
فصل اول
در این فصل ویژگی های فلکس باکس به طور کامل و دقیق مورد بررسی قرار می گیرد. همینطور تاثیراتی که این ویژگی ها بر روی ویژگی های دیگر CSS دارند بیان می شود.
این فصل شامل سیزده ویدیو می باشد که مدت زمان هر ویدیو بصورت میانگین ده دقیقه است. همینطور کدهایی که مدرس بر روی آن ها بحث می کند بصورت تمرینی وجود دارند تا پس از تماشای هر ویدیو بررسی شوند و به درک بهتر موضوع کمک کنند.
فصل دوم
پس از فراگیری ویژگی های مختلف فلکس باکس به سراغ ساخت الگوهای مختلف می رویم. این الگوها همه روزه در پروژه های مختلف پیاده سازی می شوند و با یادگیری نحوه ساخت آنها می توانیم به راحتی بعد از این دوره طرح های مختلف بوسیله فلکس باکس پیاده سازی کنیم.
این فصل شامل نوزده ویدیوی آموزشی می باشد و کدها برای تمرین نیز آماده شده اند.
موارد زیر نمونه ای از الگوهایی هستند که در این فصل بررسی می شوند:
فصل سوم
بعد از فصل دوم کاملا آماده این خواهیم بود که از فلکس باکس برای چیدن آیتم های مختلف سایت در کنار هم استفاده کنیم. اما اگر پروژه هایی که انجام می دهیم نیاز به این دارند که کاربران مرورگرهای قدیمی تر را نیز پشتیبانی کنند باید تکنیک های فصل سوم را نیز بدانیم.
در این فصل مواردی گفته می شود تا بتوانیم با خیال راحت از فلکس باکس در تمام پروژه ها استفاده کنیم.
روش هایی که بوسیله آنها می توانیم مرورگرهای قدیمی تر را نیز پشتیبانی کنیم. همچنین مشکلاتی که در برخی از مرورگرهای جدید وجود دارند بررسی می شود و راهکارهای مورد نظر برای آنها ارایه می شود.
ویدیو نمونه
خیلی عالیه بود این دوره، ممنون
خوشحالم مفید بوده امین جان. موفق باشید.
سلام آقای سیدی
من یه پروژه شروع کردم و دو سه هفته فقط رو ویژوالش کار کردم
برای ریسپانسیو کردنش از flexbox استفاده کردم ولی ایرادایی داره
توی دیوایسای مختلف اون چیزی ک من میخوام نمایش داده نمیشه
حتی از prefixer استفاده کردم ولی ایراد کارم نمیدونم کجاس.
من توی صفحه اصلی پروژم که سری سکشن یا کانتاینتر تعریف کردم که هر کدوم طول و ارتفاع مشخص دارن
بنظرتون اصلا درسته که از فلکس استفاده کنم؟
از بوتسترپ خوشم نمیاد که بخوام ازش استفاده کنم.
نمیدونم رسوندم منظورمو بهتون یا نه.
توی مرورگر کروم خودم اون چیزی که من کدشو مینویسم به راحتی جواب میده ینی ریسایز کنم پنجره مرورگرو جواب میده حتی توی فایر فاکس
ولی وقتی سایت رو روی هاست قرار میدم با گوشیای مختلف چک میکنم درست در نمیاد.حتی با پلاگینای مختلف که که عرض سایت رو توی نمایشگرای مختلف نشون میدن هم امتحان کردم ولی جواب نمیده
ممنون میشم اگه راهنمایی کنین
سلام.من ایمیل سایت رو پیدا نکردم که برای دوره تخفیف بگیرم؟؟
سلام ایمیل توی فوتر سایت هستش
hi@css-tricks.ir
تخفیف مربوط به این دوره نمیشه مربوط به کارگاه صفحه آرایی میشه.
سلام
من تنها ترسم استفاده از flex box اینه که تو مرورگرهای قدیمی ساپورت نمیشه
یعمی با آموزش شما دیگه همه چی حل میشه؟
سلام. روش های موجود برای این موضوع رو ما میگیم توی فصل آخر. درست استفاده کنید حل میشه،
salam aqae seydi to in dore ba moqadamate gird bandi safeham ashna mishim ?? age kasi mabahese girdo nadone mitone in doraro befahme ?
سلام، گریدبندی در گارگاه صفحه آرایی آموزش داده میشه، اینجا یک اشاره ای فقط میشه نه بیشتر،
http://css-tricks.ir/?p=6133
و البته که فایرفاکس خیلی مناسب برای گرید بندی نیست و باید کم کم به جای گریدبندی قدیمی CSS Grid رو یاد بگیرید.
http://css-tricks.ir/reference/grid
حالا اگر میخواید گریدبندی قدیمی رو یاد بگیرید که پروژه های امروزی رو جلو ببرید، کارگاه صفحه آرایی کمکتون میکنه. بعد از اون باید فلکس باکس رو یاد بگیرید.
و در آینده نزدیک هم که CSS Grid اوضاع پشتیبانیش بهتر شد، اونو باید جایگزین گریدبندی قدیمی بکنید، یعنی در واقع از فلکس باکس و گرید همزمان برای صحفه آرایی استفاده خواهید کرد در آینده.
فعلا باید از گرید بندی قدیمی (استفاده از float) و از فلکس باکس توی صفحه آرایی هاتون استفاده کنید.
سلام وقت بخیر
می خواستم بدونم با توجه به اینکه این دوره در سال 95 تولید شده، آیا امکان داره مطالب جدید به این مباحث اضافه شده باشه، که در دوره بیان نشده؟ مثلا ویژگی های جدید.
سلام.
نه ویژگی جدیدی بوجود نیومده. فقط امکان داره بعضی از باگ هایی که در فصل سوم بیان میشه تا الان رفع شده باشه که خبری خوبی هستش.
متشکرم
تخفیف دانشجویی نمیدید؟
لطفا کد تخفیف ارائه بدید تو این شرایط اقتصادی بد بتونیم خرید بکنیم.
برای آموزش های sass و فلکس باکس.
سپاس از شما
سلام استاد
من همه فیلم های آموزش شما رو خریدم و آموزش دیدم. سایت رو هم تقریبا کامب مطالعه کردم.
تدریس بسیار عالی بود.
هدف من رفتن به سمت fullstack شدن بر پایه .NET هست. از HTML و CSS و Sass شروع کردم، الان هم دارم با bootstrap آشنا میشم.
فکر میکنم مرحله بعد باید سراغ javascript برم.
اما برای مرحله بعد آیا باید Jquery رو یاد بگیرم یا برم سراغ react یا angular یا … (تفاوت اینها رو هم خوب متوجه نشدم)
اگه ممکن هست می خوام برای من که هدفم fullstack هست، یک نقشه راه برای قسمت frontend ارائه بدید، مثلا اینطوری :
1- HTML : که markup
2- CSS شامل float و flex
3-Sass
4-Bootstrap
5- Javascript
6- ?
7- ?
(اگر برای ردیفهای از 6 به بعد یک توضیح یک خطی هم مرقوم بفرمایید خیلی متشکر می شم)
سلام، لینک زیر رو چک کنید:
https://github.com/kamranahmedse/developer-roadmap
سلام استاد
توی یه کامت فرموده بودید که احتمالا آموزش جاوا اسکریپ رو هم به زودی شروع می کنید، آیا توی یک یا دوماه آینده می تونیم استفاده کنیم؟
سلام، نمیتونم قول بدم راستش ولی تلاشم رو میکنم.
سلام.
میخواستم بدونم که در دوره آموزش جامع فلکس باکس آیا بحث طراحی بصورت واکنشگرا هم مطرح میشه ؟؟؟میخواستم این دوره را بخرم ولی واکنشگرایی با فلکس باکس خیلی برام مهمه ؟؟؟؟
سلام، مثال های فصل دوم دوره فلکس باکس همه بصورت واکنشگرا طراحی می شن اما اصول طراحی واکنشگرا فقط در دوره طراحی صفحه آرایی واکنشگرا مطرح میشه.
سلام آقای سیدی
در تعجبم شما چرا تمامی آموزش های قدم به قدم css را تصویری نمی کنید یه پک کنید و بفروشید خیلی سایت های مزخرف با اساتید غیر حرفه ای میان آموزش های بی کیفیت می سازن مردم ازشون می خرن شما با این نبوغ و حرفه چرا فیلم آموزشی قدم به قدم css از مبتدی تا حرفه ای 0 تا 100 نمی سازیدخیلی فروش می کنید
سلام استاد
ممنون از سایت خوبتون و صد البته تدریس عالیتون
چند وقتی هست که دیگه دوره آموزشی نمیزارید :(
اگه میشه برای js و فریمورک هاش دوره بزارید
سلام، ممنونم از پیامتون
فقط میتونم بگم شرمنده ام. امیدوارم بتونم این کار رو هرچه زودتر انجام بدم.
اول سلام و خسته نباشید خدمت شما و همکاران گرامی تون
دوم باید قدردانی و تشکر کنم از سایت خوبتون که جامع تر از سایت شما رو ندیدم من گاهی وقت ها یک سری ضعف توی وب داشتم که البته طبیعی هست ولی وقتی با سایت شما آشنا شدم تونست این مشکلات رو حتی به صفر نزدیک کنه!
سوم دیزاین سایتتون خیلی سبک و دلنشینه که ادم ساعت ها داخلش باشه اصلا خسته نمیشه ;)
چهارم یک پیشنهاد دارم براتون، به نظرم یک سایت دیگه هم بزنین در رابطه با جاوا اسکپریت دقیقا به جامعی این سی اس اس واقعا یکی دیگه از مشکلات من همین که دنبال یک سایت جامع برای جاوا اسکپریت هستم ولی متاسفانه پیدا نمیشه.
در آخر در پناه حق موفق و سربلند باشید.
سلام، ممنون از پیام خوبتون و پیشنهادتون، براتون آرزوی موفقیت میکنم.
megajs.com
این سایت بینظیره.
سلام مهندس عزیز
من این دوره رو تهیه کردم – دوره های مقدماتی و صفحه آرایی رو هم قبلا تهیه کرده بودم
قبل از تهیه دوره فکس باکس دو سه تا دوره ویدئویی کاملا رایگان و دانلود کردم ولی باهاشون حال نکردم – به درد نخوردن
جهت آشنایی قبلی هم که با تدریس تون داشتم ترجیج دادم اینو تهیه کنم
فصل دوم مثال های کاربردی تون فوق العاده است
حیفم اومد ازتون تشکر نکنم
بی نهایت ممنون بخاطر زحماتتون
اونقدر به تدریس شما عادت کردم که نمیدونم دوره های جاوا اسکریپت و جی کوئری که شما ندارین و چه جوری با یه منبع دیگه یاد بگیرم
سپاسگزارم
انشاالله همیشه موفق باشین
سلام، ممنون از پیام قشنگتون!
خداروشکر میکنم که مفید بوده براتون
بابت کمبودها و نداشتن دوره های دیگر هم عذرمیخوام دعا کنید همت ما بیشتر بشه.
براتون آرزوی موفقیت میکنم
سلام استاد خسته نباشی.شما تدریستون جامع و کامله و همین سیستم homework و تمارینی که میزارین خیلی به دانشجو دوره برای یادگیری کامل کمک می کنه.من سه تا از دوره های شما رو خریداری کردم و دوتای دیگه رو هم میخرم در آینده نزدیک.. چون تدریستون عالیه اگه میشه لطفا دوره ای کامل هم برای جاوااسکریپت تدریس کنید که خودم قطعا مشتری اولشم. با آرزوی موفقیت
سلام، خوشحالم تونسته کمی مفید باشه براتون.
به امید خدا
با آرزوی موفقیت همچنین برای شما
با سلام استاد
دوره عالی بود.
هم چنین اصرارتون به تلفظ کلمه width.
استاد یه تخفیفی اگه میشه بزارید برای این دوره و بقیه دوره ها ممنون
سلام مهندس جان من همه دوره های سایتتون را خریدم به جز دوره فلکس باکس لطفا یه کد تخفیف برای خرید این دوره به ما بدید
سلام من دوره فلکس باکس رو تهیه کردم اما ویدیو ها صدا نداره
سلام، این مورد زیاد اتفاق میافته
این مورد رو بچه ها زیاد میگن، گاهی مشکل از نرم افزاری هستش که استفاده میکنند یا دستگاه و …
همینطور گاهی در زمان دانلود امکان داره به دلیل مشکل در ارتباط شما، مثلا فرض کنید سرعت اینترنت شما ضعیف هستش یا اینکه همون لحظه سرور ما مشکل داره در نتیجه خطایی برای فایل ها بوجود بیاد. پس دانلود رو دوباره انجام بدین مشکل باید حل بشه.
در غیر این صورت با ایمیل سایت تماس بگیرید تا راه حل دیگه ای براتون فراهم کنیم.
موفق باشید
خنده داره
توی ویدیوی نمونه این صفحه عنوانش رو گذاشتین فوتر چسبان
بعد برای اینکه توجیح استفاده از فلکس باکس رو انجام داده باشین
میاین از فلکس باکس استفاده می کنین و در پایان ویدیو میبینم با اضافه کردن محتواهایی از جنس پاراگراف
به تگ اصلی ( main ) فوتر میره زیر و دیگه چسبان نیست و میگین اگه محتوا یکی یا دوتا باشه فوتر چسبانه
منظورتون از تولید این مدل آموزشها که اسمشون با محتواشون همخونی نداره چیه ؟
منتظر جواب شما هستم
دوست عزیز احتمالا فوتر چسبان رو بد متوجه شدید وقتی محتوا کم باشه فوتر تو حالت معمولی میاد بالا قرار میگیره و ظاهر سایت جالب نیست اینجا از فلکس استفاده میکنیم که اگه محتوا کم بود فوتر به پایین بچسبه طبق ویدو , وقتی هم محتوا زیاد شد خب فوتر میره پایین مثل بقیه طرح هایی که دیدید
عالی بود
عالی بود
من خیلی دقیق یاد گرفتم
ممنون