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

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

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

گیج کننده؟

بیایید به یک مثال نگاه کنیم، در اینجا HTML برای ایجاد یک ردیف از عناصر است:

<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-item را با تنظیم تعیین کردیم flex: 1 1 خودکار;. این خم شدن اموال مختصر برای تنظیم است رشد انعطاف پذیر، انعطاف پذیر، و مبتنی بر انعطاف پذیری خواص در یک بیانیه؛ مقدار پیش فرض آن است 0 1 خودکار. توجه کنید “ردیف” div انعطاف پذیر استcontainer، و اندازه موارد را در آنجا تنظیم نمی کنیم. اندازه را داخل فلکس آیتم تنظیم می کنیم.

هنگامی که در یک مرورگر پیش‌نمایش می‌شود، یک ردیف از کادرها دریافت می‌کنیم، همانطور که انتظار دارید:

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

.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;
}

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

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

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

Grid دارای ویژگی “Gap” است، Flexbox ندارد

شما می توانید استدلال کنید که تفاوت عمده بین فلکس باکس و گرید این است که در دومی می توانیم ناودانی بین آنها ایجاد کنیم. اقلام شبکه استفاده کردن شبکه-ستون-شکاف، مثل این:

برای دستیابی به نتیجه مشابه در فلکس باکس، باید از ظروف بالشتکی و تو در تو استفاده کنیم یا عرض فلکس را افزایش دهیم.container و استفاده کنید توجیه-محتوا اموال برای گسترش اقلام انعطاف پذیر

ما باید در فلکس باکس یک مسیر مداری را طی کنیم زیرا a ندارد شکاف ویژگی. با این حال، این است روی راه؛ را CSS Box Alignment Module 3 شامل ویژگی های CSS مربوط به تراز جعبه ها در همه حالت های طرح بندی: طرح بندی بلوک، طرح بندی جدول، طرح بندی انعطاف پذیر و طرح بندی شبکه ای. ماژول Box Alignment خواص را از flexbox، grid و multi-column جمع‌آوری می‌کند که می‌تواند به طور مداوم در تمام مدل‌های طرح‌بندی استفاده شود. در نهایت می توانیم شکاف هایی را با آن اضافه کنیم شکاف ردیف و شکاف ستون خواص، اما هنوز نه.

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;
}

این توجیه-محتوا ویژگی تعیین می کند که چگونه فضای اضافی flex-container به اقلام flex توزیع می شود. این فضای اطراف value فضا را به گونه ای توزیع می کند که اقلام انعطاف پذیر به طور مساوی با فضای مساوی در اطراف خود قرار می گیرند.

در مرحله بعد، بیایید نگاهی به یک چیدمان دو بعدی رایج بیندازیم:

ما نمی‌توانیم این طرح‌بندی را با یک سطر یا یک ستون پیاده‌سازی کنیم، برای این کار به چندین سطر و ستون نیاز داریم و اینجاست که از CSS Grids استفاده می‌کنیم. بیایید آن را با استفاده از 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-rows ویژگی. این تکرار() تابع 3 ردیف با خودکار ارتفاع

سپس، در داخل گرید-اقلام (سرتیتر، اصلی، کناری و پاورقی) ما تعیین می‌کنیم که این آیتم‌های شبکه با استفاده از منطقه شبکه ویژگی.

Flexbox Wraps در مقابل Grid Wraps

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

بیایید با ساختن یک طرح بندی نمونه به این تفاوت نگاه کنیم. دو ردیف ایجاد کنید و 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;
}

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

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

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

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

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

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

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

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

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

و چند سبک در CSS خود به آن بدهید:

.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-grow” ویژگی عناصر ورودی روی تنظیم شده است “1”, اما عنصر ورودی ایمیل روی 2 تنظیم شده است. بنابراین، زمانی که فضای اضافی در دسترس باشد، عنصر ورودی ایمیل در مقایسه با سایر عناصر ورودی دو برابر افزایش می یابد.

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

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

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

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

قطعا نه.

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

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

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

تصویر شاخص از طریق DepositPhotos.