مقایسه Flexbox و Grid در CSS3

مقایسه Flexbox و Grid در CSS3

مقایسه Flexbox و Grid در CSS3

GRID VS FLEXBOX: WHICH SHOULD YOU CHOOSE?

توسط : admin
CSS Grid و CSS Flexbox فن آوری های طرح بندی صفحه وب هستند که سالهاست به شدت مورد استفاده واقع می شوند. اما ، با وجود برخی شباهت های سطحی ، در واقع برای کارهای بسیار متفاوتی مورد استفاده قرار گرفته و هر یک مجموعه مسائل بسیار متفاوتی را حل می کنند.

 

در یک سناریو ایده آل ، ممکن است متوجه شوید لازم است که هر دو را برای موارد مختلف طرح بندی استفاده کنید. در این پست ما به تفاوت های آنها خواهیم پرداخت ، چگونگی حل مشکلات مختلف چیدمان را بررسی خواهیم کرد و به شما کمک می کنیم انتخاب کنید که (در صورت وجود) کدام راه حل برای صفحه شما  مناسب است.

 

Grid مبتنی بر Container است ، Flexbox مبتنی بر محتوا است

در چیدمان flexbox اندازه یک سلول (flex-item) درون خود flex-item تعریف می شود و در طرح grid ، اندازه یک سلول (grid-item) در داخل grid-container یا فضای Grid تعریف می شود.

گیج شدید ؟

<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

حالا ما با استفاده از Flexbox به کدهای بالا استایل  میدهیم :

.row {
    margin: 20px auto;
    max-width: 300px;
    display: flex;
}
.row > div {
    border: 1px dashed gray;
    flex: 1 1 auto; /* Size of items defined inside items */
    text-align: center;
    padding: 12px;
}

 

ما اندازه سلول های داخل فلکس را با تنظیم flex تعریف کردیم:

 توجه کنید که قسمت "row" ظرف فلکس است و ما اندازه آیتمها را در آنجا تعیین نمی کنیم. اندازه را درون آیتم flex که در اینجا div است قرار می دهیم.

تنظیمات آیتم برای مشخصه flex به ترتیب شامل موارد زیر است :

flex: 1 1 auto; flex-grow(1) flex-shrink(1) flex-basis(auto)

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

screencap-1

 

حال ببینیم چگونه می توانیم با استفاده از grid ، همان خروجی را تولید کنیم:

.row {
    margin: 20px auto;
    max-width: 300px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* Size of items defined inside container */
}
.row div {
    border: 1px dashed gray;
    text-align: center;
    padding: 12px;
}

 

کد فوق دقیقاً همان خروجی قبلی را به ما می دهد.

 

توجه کنید ، اکنون اندازه سلول را با استفاده از ستون های الگوی شبکه یا grid-template-columns در داخل grid-container یا محفظه شبکه (.row) تعریف می کنیم ، نه  در آیتم های grid.

 

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

 

Grid دارای خاصیت "Gap" است ،اما Flexbox  خیر

می توانید استدلال کنید که تفاوت عمده بین flexbox و grid در این است که در حالت دوم می توانیم با استفاده از grid-column-gap ، شکاف هایی بین آیتم های grid  ایجاد کنیم:

screencap-2

 

برای دستیابی به نتیجه مشابه در flexbox ، ما باید از تگ های تو در تو و padding استفاده کنیم ، یا عرض تگ فلکس را افزایش دهیم و از ویژگی  justify-content برای ایجاد فاصله بین آیتمها استفاده کنیم.

ما باید در flexbox یک مسیر مداری را طی کنیم زیرا ویژگی gap برای فلکس وجود  ندارد. با این حال ، راه دیگری هست ؛  CSS Box  شامل ویژگی هایی مربوط به تراز کردن Box ها در همه حالت های طرح بندی میباشد که شامل : block layout, table layout, flex layout, و grid layout است. ماژول Box Alignment  مجموعه ای از خصوصیات flexbox, grid, و multi-column را که می توان به طور مداوم در تمام مدل های طرح استفاده کرد ، را دارا است . در نهایت ما می توانیم شکافهایی را با خصوصیات  row-gap و column-gap اضافه کنیم .

 

Flexbox یک بعدی است ، Grid دو بعدی است

از زمانی که از tables ها برای طرح بندی  استفاده کردیم ، عناصر را به عنوان ردیف و ستون در صفحه قرار داده ایم. هر دو flexbox و Grid مبتنی بر این مفهوم هستند. Flexbox برای تنظیم عناصر در یک ردیف یا یک ستون بهتر عمل میکند . Grid برای ترتیب عناصر در چندین ردیف و ستون بهترین گزینه است.

 

به عبارت دیگر ، Flexbox یک بعدی  و Grid دو بعدی است. بیایید یک طرح یک بعدی معمولی را استفاده کنیم - دکمه های اشتراک شبکه های اجتماعی:

همه عناصر در یک ردیف واحد قرار دارند. ما می توانیم این کار را با استفاده از Flexbox مانند این پیاده سازی کنیم:

<ul class="social-icons">
  <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
  <li><a href="#"><i class="fab fa-twitter"></i></a></li>
  <li><a href="#"><i class="fab fa-instagram"></i></a></li>
  <li><a href="#"><i class="fab fa-github"></i></a></li>
  <li><a href="#"><i class="fas fa-envelope"></i></a></li>
  <li><a href="#"><i class="fas fa-rss"></i></a></li>
</ul>

.social-icons {
  display: flex;
  list-style: none;
  justify-content: space-around;
}

خاصیت justify-content ، چگونگی توزیع فضای اضافی ظرف فلکس به آیتم های فلکس را تعیین می کند. مقدار فضای اطراف  را به گونه ای توزیع می کند که آیتم های فلکس به طور مساوی با فضای مساوی در اطراف خود قرار بگیرند.

در مرحله بعدی ، اجازه دهید نگاهی به یک طرح 2 بعدی معمولی بیندازیم.

ما نمی توانیم این طرح را با یک ردیف یا یک ستون واحد پیاده سازی کنیم ، برای انجام این کار به چندین ردیف و ستون نیاز داریم ، و این همان جایی است که ما از  Grid ها استفاده می کنیم. بگذارید آن را با استفاده از CSS Grid بسازیم:

<div class="container">
  <header>Header</header>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

و کد CSS آن :

.container {
  max-width: 800px;
  margin: 2em auto;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: repeat(3,auto);
  grid-gap: 1rem;
}

.container header {
  grid-area: 1/1/2/3;
}

.container main {
  grid-area: 2/1/3/2;
}

.container aside {
  grid-area: 2/2/3/3;
}

.container footer {
  grid-area: 3/1/4/3;
}

.container > * {
  background-color: #ddd;
  padding: 1rem;
}

ما در حال ایجاد دو ستون با استفاده از ویژگی هایgrid-template-columns و سه ردیف با استفاده از ویژگی های grid-template-rows  هستیم. تابع repeat()   سه ردیف با ارتفاع خودکار ایجاد می کند.

 

سپس ، در داخل ایتم های grid موارد ( header, main, aside و footer)  را مشخص کرده و با استفاده از خاصیت grid-area مساحت آیتم ها را پوشش می دهیم .

 

Flexbox Wraps در برابر Grid Wraps

 

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

 

بیایید با ساختن یک طرح نمونه به این تفاوت نگاه کنیم. دو ردیف ایجاد کنید و 6 div را درون هر سطر قرار دهید:

<h2>Flexbox</h2>
<div class="row-flex">
    <div>1 2 3  4 5 6 7 8 9 0</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
 
<h2>Grid</h2>
<div class="row-grid">
    <div>1 2 3  4 5 6 7 8 9 0</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

 

اکنون ، از Flexbox برای چیدمان ردیف اول و Grid برای ردیف دوم استفاده میکنیم :

/* Flexbox row styles */
.row-flex {
  margin: 40px auto;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
}
.row-flex div {
  border: 1px dashed gray;
  flex: 1 1 100px;
  text-align: center;
  padding: 12px;
}
/* Grid row styles */
.row-grid {
  margin: 40px auto;
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.row-grid div {
  border: 1px dashed gray;
  text-align: center;
  padding: 12px;
}

برای ردیف اول ، ما از flex استفاده می کنیم:۱ 1 100px به عرض پایه 100px به آیتم های فلکس اجازه می دهیم تا بزرگ یا کوچک شود.

ما همچنین می توانیم با تنظیم کردن ویژگی flex-wrap  ، آیتم های فلکس را درون ظرف wrap کنیم ، مقدار پیش فرض آن nowrap است.

 

برای ردیف دوم ، ما از ویژگی grid-template-columns استفاده می کنیم تا ستون هایی با حداقل عرض 100px تنظیم شده توسط تابع minmax () ایجاد کنیم. ما از تابع repeat () برای ایجاد مکرر ستون ها استفاده می کنیم.

 

 

می توانید زیبایی Grid و Flexbox را در توانایی کشش و فشردن آیتمها بر اساس میزان فضای موجود در نظر بگیرید. Flexbox با استفاده از خصوصیات flex-grow و flex-shrink  ، این امر را بدست می آورد ، و Grid با استفاده از ترکیبی از توابع minmax و پر کردن خودکار در داخل ویژگی grid-template-columns ، به این هدف می رسد.

 

با این حال ، سلول های 5 و سلول 6 را با دقت نگاه کنید ، زیرا به  سمت پایین  می آیند. در مورد Flexbox ، سلول 5 و 6 به اندازه سلولهای دیگر هنگام پایین آمدن به همان اندازه نیستند. در حالی که در مورد Grid ،  اندازه تمام سلول های دیگر در grid مشابه بقیه سلول ها است .

 

وقتی یک آیتم flex به صورت wrapped می شود و به ردیف جدید منتقل می شود ، الگوریتم چیدمان Flexbox با آن به عنوان بخشی از یک ظرف فلکس متفاوت رفتار می کند. از این رو ، مورد گسترش یافته زمینه خود را از دست می دهد و به سطر بعد منتقل میشود .

 

این رفتار می تواند در برخی موارد استفاده شود ، به عنوان مثال ، فرم اشتراک ایمیل.

 

بیایید این فرم استراک را بسازیم:

<div class="subscriber-form-container">
  <form>
    <input type="email" placeholder="Email Address">
    <input type="text" placeholder="Name">
    <input type="submit" value="Subscribe">
  </form>

 

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

.subscriber-form-container {
  max-width: 650px;
  margin: 40px auto;
  border: 1px dashed gray;
  box-sizing: border-box;
}
.subscriber-form-container form {
  display: flex;
  flex-wrap: wrap;
}
.subscriber-form-container form input {
  margin: 6px;
  padding: 0.4rem;
  box-sizing: border-box;
}
.subscriber-form-container form input{
  flex: 1 1 150px;
}
.subscriber-form-container form input[type="email"] {
  flex: 2 1 300px;
}

 

خواص فلکس دارای سه ویژگی است: flex-grow, flex-shrink, و flex-basis.  ما می خواهیم عرض قسمت "ایمیل" نسبت دو عنصر ورودی دیگر دو برابر باشد و ما با استفاده از "flex-grow" و "flex-basis" آن را تنظیم میکنیم .

 

ویژگی "flex-grow" عناصر ورودی بر روی  "1" تنظیم شده است ، اما عنصر ورودی ایمیل روی 2 تنظیم شده است. بنابراین ، هنگامی که فضای اضافی در دسترس است ، عنصر ورودی ایمیل در مقایسه با سایر عناصر ورودی دو برابر رشد می کند.

 

Flexbox در این مورد بهتر از Grid عمل میکند . بله ، می توانید با استفاده از عملکرد minmax () برخی از کارها را برای تکرار CSS Grid از این رفتار استفاده کنید ، اما Flexbox برای این نوع از طرح بندی های تک بعدی مناسب است.

 

با این حال ، اگر می خواهید یک چیدمان چند بعدی با عناصر wrapped شده و همچنین حفظ عرض آنها ، به عنوان مثال ، یک گالری تصویر باشد ، Grid بهترین انتخاب است .

 

نکته دیگر اینکه آیا متوجه شدید ما در اینجا از هیچ گونه media queries استفاده نمی کنیم. به این دلیل که طرح بندی های Flexbox و Grid بر پایه مفهوم واکشن گرا ساخته شده اند و از این رو ، استفاده از Query Media در آنها کمتر است .

 

 

آیا  Grid در آینده Flexbox را منسوخ خواهد کرد؟

قطعا خیر .

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

 

در حال حاضر ، CSS Grid از همه مرورگرها برای تهیه وب سایت های آماده تولید ، پشتیبانی کافی نمی کند. قاعده کلی استفاده از این نکته این است که یک ویژگی باید بیش از 95٪ از استفاده جهانی را پوشش دهد. فقط در این صورت من از این ویژگی در وب سایتهای واقعی استفاده می کنم. در حال حاضر ، Flexbox 95٪ از استفاده جهانی را پوشش می دهد ، و Grid 87٪ از استفاده جهانی را پوشش می دهد.

 

به زودی Grid نیز پشتیبانی خوبی را در بین مرورگرها به دست خواهد آورد ، و ما از ترکیبی از Grids و Flexboxes برای ایجاد طرح های شگفت انگیز وب سایت استفاده می کنیم که قبلاً امکان پذیر نبودند.

 

برچسب ها

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

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