60% تخفیف ویژه دوره تخصصی وردپرس به مدت محدود مشاهده دوره

آموزش کامل فلکس باکس flex box

آموزش فلکس باکس

آموزش فلکس باکس در css یکی از مهم ترین تکنیک هایی است که در طراحی وب با html و css باید بلد باشید شما با استفاده از flex box در css براحتی میتوانید چیدمان المان های صفحه را به بهترین شکل انجام دهید بدون اینکه نیاز به استفاده از خصوصیت هایی مثل float و position و… داشته باشید. در این پست فیلم آموزش فلکس باکس و نحوه استفاده از آن را بصورت کاملا رایگان یادمیگیرید.(این ویدیو بخشی از دوره آموزش html و css میباشد)

 

 

آموزش فلکس باکس بخش دوم

 

تعریف فلکس باکس

پیش از پرداختن به آموزش فلکس باکس بد نیست کمی در مورد این ماژول صحبت کنیم. flexbox یک ماژول است که برای لایه بندی صفحات وب در css استفاده می شود. این قابلیت امکان طراحی لی اوت صفحات را به صورت پویا و انعطاف پذیر فراهم می کند. با کمک فلکس باکس شما می توانید صفحاتتان را به صورت ریسپانسیو بسازید. امروزه کار با این ماژول خیلی رایج شده است تا جایی که یکی از الزامات برنامه نویسی برای هر طراح وبسایت است. یکی از دلایلی که اهمیت یادگیری این ماژول را نشان می دهد این است که در فریم ورکهای جدید مثلا بوت استرپ۴، از فلکس باکس استفاده شده است و به نحوی می توان گفت پیش نیاز یادگیری این فریم ورک است.

 

در گذشته طراحان وب ناچار بودند برای قالب بندی صفحات از قابلیت هایی نظیر Float و Position استفاده کنند و کار با آنها کمی پیچیده بود. مثلا برای اینکه یک مولفه را در سمت راست قرار دهند با استفاده از دستور float به روش زیر عمل می کردند

همین کد با دستور position به فرم زیر نوشته می شد:

 

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

 

 

آموزش flexbox در css

آموزش flexbox در css یکی از مباحث کاربردی است، با کمک flexbox شما قادر خواهید بود صفحات خود را بدون درگیر شدن با مشکلاتی نظیر float یا whitespace براحتی طراحی کنید. مزیت صفحه آرایی با فلکس باکس این است که صفحات بصورت ریسپانسیو خواهند بود. از جمله امکاناتی که flexbox در اختیار توسعه دهندگان قرار می دهد می توان به این موارد اشاره کرد:

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

برای شروع کار آموزش فلکس باکس در css ابتدا به معرفی عناصر اصلی فلکس باکس می پردازیم. اولین عنصر نگهدارنده یا container است. منظور از نگهدارنده همان گرید مادر است. سایر آیتم های فرزند یا flex-item ها داخل این گرید قرار می گیرند. مطابق شکل زیر:

 

معمولا ویژگی ها بصورت سلسله مراتبی به این عناصر داده می شود و بیشتر ویژگی ها برای عنصر container تنظیم می شود. نحوه تعریف این دو عنصر به صورت زیر است:

 

در قسمت display در کد اول، می توان از inline-flex به جای flex استفاده کرد در اینصورت نگهدارنده یا container  به فرم inline نشان داده میشود. تنظیم نحوه چیدمان با دستور flex-direction انجام می شود. می توان حالت افقی (row) یا عمودی (column) را انتخاب کنیم. همجنین می توان چیدمان را عمودی وارونه row-reverse یا افقی وارونه column-reverse نیز تنظیم کرد. نحوه قرار گرفتن عناصر در این ردیف ها یا ستون نیز به دو صورت rtl یعنی از راست به چپ یا ltr یعنی از چپ به راست انجام می شود.

حال در نظر بگیرید که عناصر شما از سایز container بیشتر باشد در این حالت به سه صورت می توان عناصر را جایگذاری کرد. این ویژگی flex-wrap نام دارد:

  • حالت wrap : عناصر به ردیف بعدی هدایت می شوند.
  • حالت nowrap : عناصر در ابعاد کوچکتر در همان ردیف اضافه شوند.
  • حالت wrap-reverse : برعکس حالت اول است یعنی عناصر اضافه در همان ردیف می مانند و عناصر داخل ردیف به ردیف بعدی منتقل می شوند.

flex wrap

 

نحوه نوشتن این ویژگی در کد بصورت زیر است. دقت کنید که این ویژگی برای نگهدارنده تعریف می شود.

میتوان حالتی تعریف کرد که دو ویژگی بالا بصورت کوتاه شده در یک ویژگی تحت عنوان flex-flow قرار گیرد. بطور مثال:

 

 

آشنایی با محورها در flexbox 

در قسمت بعدی از آموزش flexbox به نحوه تنظیم محورها می پردازیم. به دو تصویر زیر به دقت نگاه کنید.

axis in flexbox

axis in flexbox

همانطور که در تصویر مشاهده می کنید محور اصلی یا main axis اشاره به محوری دارد که مولفه ها را در کنار یکدیگر قرار می دهد. cross axis برای آیتم های داخلی و نگهدارنده دو معنای متفاوت دارد که به ترتیب در تصویر اول و تصویر دوم نمایش داده شده است.

 

 

ترازبندی عناصر نسبت به main axis

مبحث دیگر در آموزش flexbox نحوه هم ترازسازی عناصر است. با کمک یک ویژگی به نام justify-content می توانید عناصر داخلی یک نگهدارنده را نسبت به main axis ترازیندی کنید. این ترازبندی می تواند چندین حالت مختلف داشته باشد. در تصویر زیر این حالت ها نمایش داده شده است.

flexbox justify-content

کد زیر نمونه ای از این ترازبندی را نشان می دهد.

 

این پست رو حتما ببین : آموزش طراحی قالب وردپرس و فروش در ژاکت

 

ترازبندی عناصر نسبت به محور cross axis

مطابق محور اصلی می توان ترازبندی را براساس محور عمودی نیز انجام داد. برای اینکار از ویژگی align-item استفاده می کنیم. در شکل زیر انواع ترازبندی عمودی را مشاهده می کنید.

flexbox align-items

کد زیر نمونه ای از این نوع ترازبندی است:

 

 

ترازبندی عناصر اضافه نسبت به cross axis

در صورتی که عناصر ما در بیش از یک ردیف قرار داشتند نیز می توان آنها را نسبت به محور عمود تراز بندی کرد. این قابلیت با استفاده از ویژگی align-content انجام می شود. به شکل های زیر دقت کنید.

flexbox-align-content

نحوه استفاده از آن در کد css بصورت زیر است:

 

 

تغییر چینش آیتم های داخلی

تغییر نحوه چینش عناصر داخلی یکی دیگر از مباحث آموزش فلکس باکس است که در ادامه به آن می پردازیم. اولین ویژگی order است. با کمک این ویژگی، می توان ترتیب نمایش عناصر را تغییر داد بگونه ای که تغییری در ساختار html ایجاد نشود. مقداری که برای این ویژگی تنظیم می شود یک عدد صحیح است. مقدار پیشفرض برای تمامی عناصر ۰ است. بزرگترین عدد نشانگر آخرین عنصر در ترتیب است (عناصر از چپ به راست در نظر گرفته می شوند). به تصویر زیر با دقت نگاه کنید.

flexbox-flex-order

در این مثال ما قصد داریم دومین عنصر در ترتیب تعریف شده در html (عنصر second) را از سمت چپ در اولین خانه قرار دهیم. به همین خاطر مقدار یک را برای آن مشخص می کنیم.

 

 

بسط دادن عناصر داخلی

یک مبحث مهم و کاربردی در آموزش flexbox بحث بسط دهی یا انعطاف پذیر سازی عناصر داخلی است. این قابلیت سایز عناصر را نسبت به فضای موجود در نگهدارنده تغییر می دهد. در صورتی که جهت نگهدارنده افقی (row) باشد عنصر از عرض رشد می کند و در صورتیکه نگهدارنده جهت عمودی (column) داشته باشد ارتفاع عنصر رشد خواهد کرد. در بحث انعطاف پذیری سه ویژگی مهم داریم که در ادامه به آن می پردازیم:

 

flex-grow در css

این ویژگی درصد رشد یک عنصر نسبت به سایر عناصر را برحسب درصد نشان می دهد. مثلا در صورتیکه تمامی عناصر مقدار برابر یک داشته باشند فضای موجود بین تمامی عناصر داخلی بصورت برابر تقسیم می شود. اما عدد دو برای یک عنصر باعث می شود که دو برابر سایر عناصر فضا اشغال کند.
flexbox-flex-grow
به عنوان مثال :

 

Flex basis در css

یک قابلیت دیگر در flexbox ویژگی Flex basis در css است که برای تعیین ارتفاع یا عرض عناصر داخلی براساس جهت نگهدارنده استفاده می شود. یعنی در صورتیکه جهت نگهدارنده افقی (row) باشد، عناصر به اندازه تعیین شده از عرض فضا می گیرند و در صورتیکه نگهدارنده عمودی (column) باشد عناصر از ارتفاع فضا می گیرند. توجه داشته باشید این مقدار ثابت است و مانند flex grow بصورت درصدی تغییر نمی کند. در صورتیکه هر دو ویژگی همزمان استفاده شود ابتدا به اندازه مقادیر shrink به عناصر فضا داده می شود و سپس هر میزان فضایی که از نگهدارنده باقی ماند براساس grow میان عناصر تقسیم می شود.

در این مثال مقادیر ۲۰۰px.300px و ۲۵۰px به ترتیب به عناصر تخصیص داده می شود. پس از آن این مقدار از ۹۵۰px که عرض کلی نگهدارنده است کم شده و حاصل آن یعنی ۲۰۰px براساس میزان تعیین شده برای flex grow به عناصر داده می شود. یعنی به عنصر اول و سوم مقدار ۵۰px و به عنصر دوم دو برابر آن یعنی ۱۰۰px فضا اختصاص داده می شود.

 

Flex shrink در css

آخرین دستور مربوط به منعطف سازی flexbox، دستور Flex shrink در css است. این دستور کاربرد زیادی ندارد و زمانی استفاده می شود که مجموع اندازه عناصر داخلی یک ردیف بیش از اندازه نگهدارنده بشود و به اصطلاح سرریز رخ دهد. در صورت بروز چنین مشکلی باید اندکی از فضای عناصر داخلی را کم کنیم تا این مسئله حل شود. به مثال زیر توجه کنید:

اگر مجموع عناصر بالا را محاسبه کنید برابر ۱۴۰۰px است حال تصور کنیم که اندازه نگهدارنده ۱۱۰۰px باشد و ما ۳۰۰px سرریز داشته باشیم. با توجه به مقادیر تعیین شده از عنصر اول به اندازه یک ششم فضای اشغالی آن یعنی ۵۰px باید کاهش دهیم از عنصر دوم به اندازه ۳/۶ یعنی ۱۵۰px باید کم کنیم و از سومین عنصر به اندازه ۲/۶ یعنی ۱۰۰px باید کم شود. که مجموع این سه برابر ۳۰۰px خواهد شد. با کمک سه دستور flex-grow ، flex basis و flex shrink در css شما قادرید تمامی عناصر داخلی خود را به طور متناسب تغییر اندازه دهید و مقادیر دلخواه خود را تنظیم کنید.

 

 

ترازبندی یک عنصر 

آخرین مبحثی که قصد داریم در آموزش فلکس باکس به آن بپردازیم ویژگی align-self است . به کمک این ویژگی شما می توانید عناصر داخلی خود را ترازبندی کنید. بعنوان مثال:

که نتیجه خروجی کار به صورت زیر می شود.

flexbox-align-self

 

پشتیبانی مرورگرها از fexbox

در شکل زیر پشتیبانی نسخه های مختلف مرورگرهای گوناگون از ماژول flexbox را ملاحظه می کنید. برای نسخه هایی که این ماژول را پشتیبانی نمی کنند می توان از flecibility یاflexiejs استفاده کرد.

browser flexbox support

 

صفحه واکنش گرا با استفاده از flex در css

flex در css را به اندازه کافی در بخش های قبلی شناخته اید و حالا قصد داریم به کمک FlexBox یک صفحه ساده و واکنشگرا ایجاد کنیم.

کد HTML:

کد CSS:

 

برای اینکه موضوع آموزش flex در css را تکمیل کنیم کدهای مورد نیاز برای ایجاد یک صفحه واکنش گرا را قرار دادیم و حالا میتوانید خروجی آن را در زیر میتوانید مشاهده کنید.

flex در Css

 

آموزش فلکس باکس پایانی

آموزش فلکس باکس به پایان رسید امیدوارم با مطالعه این مقاله درک درستی از آموزش flex در css و صفحه آرایی با فلکس باکس پیدا کرده باشید و بتوانید خیلی راحت تر و لذت بخش تر گذشته در طراحی صفحات وب از آن استفاده کنید. اگر سوال یا ابهامی در رابطه با صفحه آرایی با flex box دارید حتما در بخش کامنت ها بپرسید با افتخار پاسخگوی سوالات شما همراهان همیشگی وبسافت۳ هستم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *