آموزش CSSآموزش طراحی سایت

جلسه ۴۳ – مقایسه flexbox و grid

فلکس باکس یا گرید مسئله این است!

تو این مقاله، سعی کردیم به شکل مناسبی در مورد ۲ روش طبقه بندی grid و flexbox صحبت کنیم.

اگه با این دو روش آشنایی ندارین، می‌تونین درباره اون ها در مقالات آموزش flexbox و آموزش Grid در میزفا مطالعه کنین.

سوالی که پیش میاد اینه:

از فلکس باکس استفاده کنیم یا از گرید؟ کدوم بهتره؟

در پاسخ به این سوال، بهتره بگیم هردو، یا هیچکدوم!

این دو روش، یا سیستم طبقه بندی، هرکدوم ویژگی ها و برتری هایی دارن که اون یکی نداره، چند تا از مهم تریناشون رو باهم بررسی می‌کنیم:

تعداد ابعاد

تعداد ابعاد، به تعداد جهاتی گفته می‌شه که سیستم طبقه بندی، توسط اون ها طبقه بندی رو انجام میده.

در flexbox، طبقه بندی یک بعدیه، یعنی تمام فرآیند مرتب کردن و طبقه بندی عناصر،‌تنها در یک خط انجام می‌شه.
ساده تر بگیم، در flexbox، ما تغییرات رو بعد از مشخص کردن جهت توسط خاصیت flex-direction، فقط در راستای سطر یا فقط در راستای ستون انجام میدیم.

در grid، برخلاف flexbox، طبقه بندی به شکل دو بعدی انجام میشه. یعنی همزمان که می‌تونیم عناصر فرزند رو در راستای سطر مرتب کنیم، می‌تونیم اون ها رو در راستای ستونی هم مرتب کنیم.

هم پوشانی

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

این موضوع در هر دو روش طبقه بندی قابل اجراست، اما در روش grid به مراتب ساده تره.

برای انجام این موضوع در flexbox، نیاز به استفاده از margin منفی داریم که می‌تونه بعد ها تو واکنش گرا بودن صفحه ما، مشکل ایجاد کنه.

اما در سیستم grid، کافیه از خاصیت های grid-row و grid-column استفاده کنیم. برای نمونه به مثال زیر توجه کنین:

.box1{
   background-color:#bfbfbf;
   color:black;
   grid-column:1/3;
   grid-row: 1/2;
}

.box2{
   background-color:red;
   grid-column: 2/4;
   grid-row: 1/2;
   color:white;
   opacity: 0.5;
}

هم پوشانی در grid و flexbox

همونطور که در نتیجه می‌بینیم، تونستیم کاری کنیم که عنصر box2، از وسط عنصر box1 شروع به رشد کنه.

نکته: توسط دستور opacity: 0.5 شفافیت عنصر دوم رو کم تر کردیم تا هم پوشانی واضح تر باشه. برای مطالعه در مورد این دستور، می‌تونین به مقاله opacity در CSS میزفا مراجعه کنین.

اگه جایی از مسائل رو متوجه نشدین یا براتون ابهام برانگیزه، حتما تو قسمت نظرات مطرح کنین، ما پاسخگو هستیم 🙂

استفاده ترکیبی از هر دو سیستم

در نهایت، به این نتیجه می‌رسیم که بهترین کار، استفاده ترکیبی از grid و flexbox هست.

به مثال زیر و نحوه استفاده از هر دو روش دقت کنین:

ترکیب flexbox و grid

<div id="parent">

   <div class="box1">
      <p>1</p>
      <p>2</p>
      <p>3</p>
   </div>

   <div class="box2">
       <p>1</p>
       <p>2</p>
       <p>3</p>
   </div>

   <div class="box3">
      <p>1</p>
      <p>2</p>
      <p>3</p>
   </div>

   <div class="box4">
      <p>1</p>
       <p>2</p>
      <p>3</p>
   </div>

</div>
div#parent{
   display:grid;
   grid-template-columns:1fr 1fr;
   grid-template-rows:1fr 1fr;
   height:500px;
}

#parent div{
    color:white;
    font-size:3em;
}

.box1{
   background-color:blue;
   display: flex;
   justify-content: space-around;
   align-items: center;
}

.box2{
   background-color:red;
}

.box3{
   background-color:green;
}

.box4{
   background-color:orange;
}

و نتیجه به شکل زیره:

استفاده ترکیبی از flexbox و grid

در این مثال، برای عنصر parent، از grid، و برای محتوای عناصر فرزند parent، از flexbox استفاده کردیم.

همونطور که میبینیم، این دو روش به خوبی تونستن باهم کنار بیان.

پایان ترم

سوال:

به گالری تصاویر ساده زیر توجه کنین:

کوییز مقاله ۴۳

کد HTML گالری بالا به شکل زیره:

<div class="gallery">
   <div src="3.jpg" class="img1"></div>
   <div src="2.jpg" class="img2"></div>
   <div src="1.jpg" class="img3"></div>
</div>

و عکس ها، تصاویر پس زمینه عناصر فرزند div با کلاس gallery هستن.

با توجه به مطالب این مقاله و دو مقاله قبل، می‌تونین بگین از چه روش طبقه بندی برای چیدن div های فرزند استفاده شده؟ دلیلتون چیه؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

در این مقاله، سه ویژگی اصلی دو روش grid و flexbox رو با هم بررسی کردیم.

ویژگی های مورد نظر عبارت بودن از:

  • عملکرد grid دو بعدی است، در حالی که flexbox تک بعدی طبقه بندی را انجام می‌دهد.
  • قابلیت انجام هم پوشانی بین عناصر در روش grid ساده تر است.
  • از هر دو روش می‌توان به صورت یک جا و بهینه استفاده کرد.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌ شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

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

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


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر