آموزش رایگان FLEX در CSS ، پروژه محور

دانشجویان همراه سئو نود ، به یکی دیگر از دوره‌های رایگان و کاربردی در بخش آموزش‌های فرانت‌اند رسیده‌اید . دوره آموزش FLEX یکی از مشتقات دوره آموزش CSS است و دوستانی که دوره آموزش زبان CSS را پشت سر گذاشته‌اند ، معمولا برای انجام چیدمان صفحات وب با بخش float کار می‌کنند و حتی دوره‌های آموزشی رایگان نیز به دلیل اینکه بخش float ازنظر محتوا و مدت زمان آموزش ساده و سریع است ، به تدریس قسمت FLEX زمان اختصاص نمی‌دهند ، درحالیکه در این بازه زمانی ، شما بدون تسلط به تکنولوژی FLEX قادر به طراحی صحیح و انعطاف پذیر و همچنین کار با فریمورک‌هایی مثل بوت استرپ و Tailwind نخواهید بود .

اول از هرچیزی بد نیست نکته‌ای را بین توضیحات عرض کنیم که آموزش تکنولوژی فلکس باکس در دوره نابغه CSS انجام شده و علاوه بر این ، همین دوره آموزش FLEX که اکنون درحال مشاهده آن هستید نیز ، بعنوان دوره مکمل داخل دوره CSS نیز آپلود شده است و اگر قبلا در دوره CSS شرکت کرده باشید ، نیازی به شرکت در این دوره نیست …

شما با یادگیری تکنولوژی فلکس باکس ، قادر خواهید بود تا بخش layout و چیدمان عناصر داخل صفحه خصوصا DIV را به شکلی انعطاف‌پذیر و همچنین واکنشگرا انجام دهید . با یادگیری بخش فلکس ، دیگر نیازی به تکنولوژی float ندارید و آن را بصورت 100% کنار خواهید گذاشت . هدف از اینکه یک دوره آموزشی مجزا بنام FLEX منتشر شده است این بود که سرفصل‌های کامل این تکنولوژی را پوشش داده و مثال‌های کاربردی بیشتری را با دانشجویان کار کنیم تا تسلط کاملی به این بخش از CSS داشته و در قدم بعدی که یادگیری فریمورک است ، هیچ دغدغه‌ای نداشته باشید … در ادامه توضیحات این صفحه ، جزئیات هر قسمت آموزشی را خدمتتان تشریح خواهیم کرد پس همراه ما باشید …

علاوه بر تکنولوژی فلکس باکس ، بخش دیگری تحت عنوان Grid نیز وجود دارد که قدرت بسیار بیشتری از فلکس را در طراحی صفحات وب ایجاد می‌کند و در دوره آموزشی دیگری آن را نیز بصورت مفصل خدمتتان آمموزش خواهیم داد . قبلا دوره FLEX و Grid داخل یک دوره آموزشی و بصورت یکجا تدریس شده بود اما در آپدیت جدید دوره‌های آموزشی ، دوره فلکس و گرید را از یکدیگر تفکیک کردیم تا جزئیات بیشتر و دقیق‌تری را تدریس کرده و داخل دوره بگنجانیم …

چرا باید FLEX را عمیق‌تر آموزش دید ؟

اگر شما زبان طراحی CSS را از قدم صفر شروع به یادگیری کرده و سپس طراحی قالب کنید ، قبل از هرچیزی با تکنولوژی float آشنا خواهید شد که تکنولوژی اولیه برای دیزاین صفحات وب بود ( البته بعد از Table ) و دستور نوشتاری آن بصورت زیر بود :

.div {
	float:right;
}

تکنولوژی float در زمان خود بسیار مناسب بود چراکه حداکثر نیاز طراحان قالب در آن زمان فقط دیزاین کردن و قرار دادن المان‌ها در کنار هم برای داشتن ساختارهای عمودی یا افقی بود و تغییر ترتیب عناصر چندان اهمیت نداشت . در آن زمان باتوجه به اینکه یک ساختار قدیمی بنام table کنار گذاشته شده بود و می‌توانستیم با یک خط کد بصورت بالا ، عناصر را شناور کنیم ، جذابیت بیشتری احساس می‌کردیم . اما زمانی که از دستور float استفاده می‌شد ، ترکیب عناصر صفحه از هم گسسته می‌شد و لازم بود تا به کمک دستوراتی همچون clear ، خاصیت شناور بودن را در ادامه صفحه خنثی کنیم ، بصورت زیر :

.div2 {
	clear: both;
}

اگر دستور بالا را در ادامه طراحی صفحه وارد نمی‌کردیم ، باید به همه عناصر صفحه دستور clear اعمال می‌کردیم که این موضوع اذیت‌ها و درگیری‌های خودش را داشت . در داخل تکنولوژی float فقط قادر بودیم تا المان‌هایی که در زیر یکدیگر قرار دارند و اصطلاحا از نوع بلوک می‌باشند را در کنار یکدیگر قرار داده و ویژگی نمایش آنها را از block به inline-block تغییر دهیم . اما کنترل زیادی روی این المان ها نداشتیم . همچنین نمی‌توانستیم ترتیب قرارگیری عناصر را نیز بسادگی تغییر دهیم . برای مثال در حالت دسکتاپ ، اسلایدر در ابتدای سایت است و دکمه ورود به سایت پایین‌تر از اسلایدر ، اکنون در حالت موبایل تصمیم داشتیم تا محل اسلایدر و دکمه را جایجا کنیم ، باید ده‌ها خط کد می‌نوشتیم و گاها هم منصرف می‌شدیم . سالهای متمادی با این موارد دست و پنجه نرم کردیم تا نهایتا …

 FLEX ظهور کرد

به مرور زمان وب سایت‌ها بزرگتر شدند و کم کم سایت‌های رسپانسیو ( واکنشگرا ) نیاز اصلی دنیای وب شده و رتبه‌های بالاتری نیز به سایت‌های واکنشگرا اختصاص داده شد ( از طرف موتورهای جستجو مخصوصا گوگل ) !

از این جهت شاهد بودیم که تکنولوژی float با نواقص زیادی روبرو گردید و به وضوح احساس کردیم که امکان ایجاد انعطاف لازم در قالب‌ها وجود ندارد . در بخش FLEX باید دو قسمت را به درستی یاد گرفت دستورات مربوط به flex container و دستورات مربوط به flex item که در این دوره بصورت تفکیک شده تمامی دستورات را بصورت مفصل خدمتتان آموزش خواهیم داد . اگر یک قسمت بسیار کوچک از FLEX را خدمت شما نمایش دهیم می‌توان گفت دستورات کلی FLEX در بخش flex container به شکل زیر است :

display: flex/inline-flex;
flex-wrap: ;
flex-direction: ;
flex-flow: ;
justify-content: ;
align-items: ;
align-content: ;

هریک از دستورات بالا نیز خود مشتقات بسیاری دارند که لازم است با تمامی آنها و ویژگی‌های هرقسمت آشنا شوید برای مثال در بخش justify-content می‌توان دستورات زیر را در یک جلسه بصورت کامل یادگرفت :

justify-content: start;
justify-content: flex-start;
justify-content: end;
justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;

علاوه بر بخش flex container قسمت flex item را نیز بصورت کامل آموزش خواهید دید که البته همین قسمت نیز خود شامل تعدادی دستور و مشتقات مربوط به هرکدام است ، برای مثال به بخش زیر که دستورات مربوط به flex item است توجه کنید :

order: ;
flex-basis: ;
flex-grow: ;
flex-shrink: ;
align-self: ;
flex: ;

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

<style>
	.FLEX__ {
		display:flex;
	}
</style>

<div class="FLEX__">
	<div class="p-3 bg-dark my-2">1</div>
	<div class="p-3 bg-dark my-2">2</div>
	<div class="p-3 bg-dark my-2">3</div>
</div>

توجه کنید که کدبالا بسیار ساده نوشته شده و استایل‌های مربوط به رنگ و margin مدنظر ما نیست ، هدف این است که مشاهده کنید چگونه می‌توان فقط با 1 خط CSS ، عناصر div با ویژگی display بصورت block را کنار یکدیگر قرار داد :

اکنون بد نیست تا هریک از جلسات را خدمت شما معرفی کنیم تا اطلاع داشته باشید درهر قسمت چه مواردی را آموزش خواهید دید .

فصل اول و 8 جلسه

قسمت اول دوره مربوط به معرفی تکنولوژی FLEX و البته مقایسه آن با دو روش قدیمی جهت قراردادن عناصر خصوصا div ها درکنار یکدیگر است . تکنولوژی FLEX ارتباط مستقیمی با خصوصیت direction صفحه دارد و بسیار اهمیت دارد که ویژگی dir برای تگ html را چگونه تنظیم کنیم تا بتوانیم جهت و چیدمان صفحه را به کمک FLEX به شکل صحیح در صفحه چیدمان کنیم . پس اولین گام برای استفاده از فلکس ، تنظیم dir صفحه بصورت زیر است :

<html lang="fa" dir="rtl">

قسمت دوم دوره شما آماده هستید تا با عناصر و مشتقات دستور فلکس بیشتر آشنا شوید . ابتدا به آموزش عناصر بخش flex container خواهیم پرداخت . منظور از flex container همان div اصلی است که قصد داریم عناصر داخل آن را به روش دلخواه چیدمان کنیم و در حقیقت flex container است که خصوصیت display:flex به آن اعمال خواهد شد .

جلسه قبلی الزامات اولیه شروع کار با فلکس را یاد گرفتید در این جلسه به سراغ آموزش قسمت justify-content خواهیم رفت . بخش justify-content ترتیب و نحوه قرارگیری المان‌های داخل flex container یا همان flex item ها را بصورت افقی ( خطی ) تنظیم می‌کند که دستورات مربوط به این قسمت را در بالا خدمتتان ارائه کردیم و نیازی به تکرار آنها در این قسمت نیست .

قسمت سوم دوره آموزش فلکس ، ادامه دستورات بخش flex container است و قسمت align-items را تدریس خواهیم کرد . دستور align-items دارای حالت‌های زیر است :

align-items: baseline;
align-items: start;
align-items: flex-start;
align-items: end;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: normal;
----
flex-wrap: wrap/nowrap;

این دستور ترتیب و نحوه قرارگیری flex item ها بصورت عمودی ( تراز عمودی ) را مشخص خواهد کرد که یکی از کاربردی‌ترین بخش‌ها در طراحی به کمک فلکس است ، لذا این قسمت به همراه قسمت قبلی ، توجه بیشتری را می‌طلبد . همچنین در این قسمت دستور flex-wrap که مربوط به شکستن عناصر در عرض است را نیز خدمت شما آموزش خواهیم داد که شامل دو حالت wrap و nowrap است .

قسمت چهارم دوره مربوط به آموزش قسمت flex-direction به همراه تمامی حالت‌های ممکن برای آن است که جهت قرارگیری flex item ها را مشخص خواهد کرد . flex item ها را می‌توان بصورت سطری و ستونی و یا سطری برعکس و ستونی برعکس چیدمان کرد . direction درحالت کلی مربوط به جهت گیری عناصر است که به کمک ویژگی سطری و ستونی می‌توان خلاقیت‌هایی را در حالت واکنشگرای سایت از نظر چیدمان سطری و ستونی اعمال کرد . این دستور بصورت زیر استفاده می‌شود :

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

قسمت پنجم دوره شامل آموزش دو مبحث تکمیلی دیگر بصورت دستور flex-flow که ترکیب دو دستور flex-direction و flex-wrap بوده و دستور دوم که align-content است خواهد بود . دستور flex-flow برای کوتاه کردن دو دستور flex-direction و flex-wrap بصورت یک دستور استفاده می‌شود که در جلسات قبلی با آنها آشنا شده‌ایم . اما دستور align-content یک دستور جدید است که بازهم از خانواده دستورات flex container بوده و به div اصلی اعمال می‌شود و لازم است تا تمام حالت‌های آن را یاد گرفت . البته اگر قبلا دستورات تراز عمودی و افقی را یاد گرفته باشید ، این دستور را سریع یاد خواهید گرفت .

این دستور فاصله بین ردیف‌های عناصر flex item را زمانی که ویژگی wrap فعال بوده و بین سطرهای عناصر فاصله وجود داشته باشد تنظیم می‌کند . برای درک بهتر این دستور و کاری که انجام می‌دهد ، باید با دقت این جلسه را مشاهده کنید تا تفاوت آن را با دستورات justify-content و align-items درک کنید . دستور تجمیع شده flex-flow نیز بصورت زیر است :

flex-flow: row wrap;

در قسمت ششم دوره وارد آموزش مباحث بخش flex item خواهیم شد . به عبارتی دستوراتی که از این پس خدمتتان آموزش خواهیم داد ، دستوراتی هستند که به flex item ها یا همان عناصر داخل div اصلی اعمال می‌شوند . البته قبل از ورود به بخش آموزش order ، تفاوت بخش display از نوع flex و inline-flex را بررسی کرده و سپس دستورات order یا مرتب سازی را خدمتتان آموزش خواهیم داد .

ویژگی order یا همان مرتب سازی ، خاصیتی است که شما به هیچ عنوان در ویژگی‌هایی مثل float آن را نخواهید داشت . به کمک order قادر هستیم تا بدون دستکاری در کد HTML داخل صفحه ، عناصر را درحالت بصری جابجا کنیم و ترتیب آنها را تغییر دهیم ، برای مثال با اینکه div شماره یک در داخل کد HTML در ابتدای کد قرار دارد و اصولا باید در نمایش نیز در اول همه div ها باشد را می‌توان توسط order در محل دلخواه نمایش داد . بخش order یکی از جالب‌ترین بخش‌ها در آموزش فلکس باکس است .این دستور برای هر flex item بصورت زیر و باتوجه به اصول آن تعریف می‌شود :

.div-1 {
	order:2;
}

.div-2 {
	order:3;
}

.div-3 {
	order:1;
}

در این قسمت یک مینی پروژه عملی نیز خواهیم داشت تا مواردی که تا این جلسه خدمتتان آموزش داده شده در قالب یک پروژه عملی مرور و یادآوری شود .

قسمت هفتم دوره یکی از مهم‌ترین جلسات است که باید توجه بیشتری به آن داشته باشید . در این جلسه 3 دستور از یک خانواده را خدمت شما آموزش داده و سپس هر سه دستور را در یک دستور بنام flex تجمیع خواهیم کرد . دستورات این جلسه شامل flex-basis , flex-grow , flex-shrink است . دستور flex-basis برای تعیین حداقل عرض و بیس مشخص برای هر فلکس آیتم ، دستور flex-grow برای تنظیم نسبت بزرگ شدن هر فلکس آیتم و دستور flex-shrink برای تنظیم نسبت کوچک شدن هر فلکس آیتم در تغییرات صفحه است . یک نمونه بصورت زیر است که دستور آخر ، دستور خلاصه شده 3 دستور است ( علامت پرانتز و اسامی داخل آن در خط آخر ، صرفا برای توضیحات است و در دستور واقعی نوشته نمی‌شوند ) :

flex-basis: 200px;
flex-grow:1;
flex-shrink:2;
---
flex: 1(grow) 2(shrink) 200px(basis);

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

قسمت هشتم دوره شامل تدریس بخش نهایی از دستورات بخش فلکس آیتم است که شامل دستورات align-self هستند . مقادیر داخل دستور align-self جهت تراز کردن عناصر بصورت فردی هستند . قبلا داخل دستورات align-items و همچنین justify-content شاهد بودیم که هنگام تنظیم چیدمان ، همه عناصر داخل flex-container بصورت دسته جمعی تغییر وضعیت می‌دادند اما اکنون به کمک دستور align-self می‌توانیم هریک ازفلکس آیتم‌ها را بصورت تکی و مجزا تغییر وضعیت دهیم . مقادیر این دستور نیز همان مقادیر start , end , center و … هستند که قبل‌تر نیز برای سایر align ها از آنها استفاده شده بود . همچنین در انتهای این جلسه ، چندین سایت کاربردی نیز در زمینه کار با تکنولوژی فلکس باکس خدمت شما معرفی خواهیم کرد که به یادگیری هرچه بهتر در این زمینه کمک خواهند کرد .

فصل دوم و 6 جلسه

فصل دوم دوره آموزش flex مربوط به ایجاد یک پروژه جذاب در قالب یک تم رستوران توسط HTML و CSS و کتابخانه FLEXBOX GRID است . در این فصل برای راحتی کار ، یک کتابخانه FLEX خدمت شما معرفی خواهیم کرد که تمامی دستورات فصل اول در آن وجود دارد و نیازی نیست تا کدها را مجدد از اول بنویسیم . این کتابخانه همان دستورات flex است که در فصل اول خواندیم و هیچ چیز عجیب و غریبی داخل آن وجود ندارد که نگران آن باشید .

پروژه طراحی شده در دوره FLEX

یک قالب ساده و بسیار شکیل را برای این بخش درنظر گرفته‌ایم که قطعا در ویدیو معرفی دوره این قالب را مشاهده کرده‌اید و در تصاویر بالا نیز بخش‌هایی از این قالب را می‌توانید مشاهده کنید . قالب لندینگ پیج رستوران شامل یک صفحه اصلی و چند صفحه داخلی است که البته شما می‌توانید پوسته طراحی شده را به تنهایی توسعه داده و صفحات بیشتری به آن اضافه کنید . صفحه لاگین این پوسته نیز بسیار شکیل طراحی شده و در طراحی آن تماما از عناصر FLEX جهت تفهیم موارد تدریس شده در فصل اول استفاده شده است .

از آنجایی که شما در ادامه مسیر طراحی قالب یا همان نقشه راه فرانت‌اند بعد از یادگیری زبان CSS و همچنین کسب مهارت در بخش FLEXBOX باید به سراغ یک فریمورک مثل Bootstrap یا Tailwind بروید ، پس بهتر است در حد همین دوره به flex و طراحی به کمک یک کتابخانه مجزا آشنا شوید تا بتوانید در ادامه مسیر بدون دغدغه پیشروی کنید . برای مثال در فریمورک بوت استرپ دستورات flex و align-items و justify-content بصورت اسامی کلاس و به شکل زیر تعریف شده است :

<div class="justify-content-center align-items-center"></div>
<div class="d-flex flex-column"></div>
,...

همانطور که مشاهده می‌کنید شما صرفا به کمک اسامی کلاس‌هایی که فریمورک بوت استرپ داخل کتابخانه خود تنظیم کرده است ، تمامی ویژگی‌های فلکس را دارید و صرفا باید اطلاع داشته باشید که وظیفه دستور align-items چیست ، پس یادگرفتن کتابخانه‌هایی که بر پایه فلکس هستنند بسیار ساده است و شرط آن یادگیری اصولی در این دوره است .

اگر شما بخوبی با float آشنا باشید ، هنگامی که به سمت تکنولوژی FLEX می‌روید ، خواهید دید که دیگر رغبتی به استفاده از float ندارید ، چرا که شما کنترل بسیار بالایی نسبت به المان هایی که داخل صفحه قرار می‌دهید خواهید داشت . با استفاده از تکنولوژی FLEX می‌توانیم چیدمانی یکپارچه در صفحات وب داشته باشیم ضمن اینکه قادر هستیم تا در حالت‌های رسپانسیو مثل موبایل و تبلت ، به راحتی باکس‌های خود را جابجا کنیم و کنترل وضعیت سایت را در دست داشته باشیم . این موارد کمترین ویژگی‌های خاصیت FLEX هستند که برای یادگرفتن تمامی موارد مربوط به FLEX حتما محتوای این دوره را بخوبی یاد بگیرید .

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

تاریخچه آپدیت

انتشار دوره : 21 فروردین 1400 – شامل 10 قسمت در 4 ساعت

بروز رسانی اول : 20 دی 1404 – شامل 14 قسمت با 2 فصل در 5 ساعت