Flex و Grid دو فناوری طرح‌بندی هستند که طرح‌بندی‌های پیچیده وب را امکان‌پذیر می‌کنند، اما شما کدام را برای چه چیزی استفاده می‌کنید؟
اگر می‌خواهید وب‌سایت‌های واکنش‌گرا و خیره‌کننده بسازید، درک کامل Flexbox و CSS Grid ضروری است.
اگر برای مدت طولانی CSS می نویسید، احتمال اینکه حداقل این اصطلاحات را شنیده باشید بسیار زیاد است. حتی ممکن است تا حدی از یک یا هر دو استفاده کرده باشید. هر دو بخش قدرتمند CSS هستند، با موارد استفاده مشابه اما به طور ماهرانه متفاوت.
فلکس باکس چیست؟
Flexbox یک روش چیدمان CSS یک بعدی است که مدتی است که وجود داشته است. شما می توانید Flexbox را به عنوان مجموعه ای از ویژگی های CSS مرتبط در نظر بگیرید که می توانید از آنها برای تراز کردن عناصر HTML در یک ظرف و مدیریت فضای بین آنها استفاده کنید.
قبل از Flexbox، این نوع چیدمان نیاز به استفاده ناامیدکننده و سخت از ویژگی های شناور و موقعیت داشت.
اگر در مورد پشتیبانی مرورگر از Flexbox نگران هستید، نگران نباشید. مطابق با
caniuse.com
، تمام مرورگرهای مدرن از Flexbox پشتیبانی می کنند.
مبانی فلکس باکس
در حالی که Flexbox شامل بسیاری از ویژگی های CSS است، اصول اولیه بسیار ساده است. استفاده از Flexbox همیشه با اعلام یک کانتینر والد به عنوان یک ظرف انعطاف‌پذیر با افزودن display: flex به قوانین سبک آن شروع می‌شود. انجام این کار به طور خودکار باعث می شود که همه فرزندان این عنصر انعطاف پذیر باشند.
پس از آن، می توانید با استفاده از ویژگی justify-content، توزیع فضا را در داخل کانتینر flex کنترل کنید. می توانید تراز موارد flex-item را با ویژگی align-item کنترل کنید.
در اینجا یک مثال کد است که از Flexbox برای پخش فضای یک ظرف به طور مساوی بین فرزندان خود استفاده می کند و همه آنها را در مرکز ظرف تراز می کند. این HTML است:
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
این CSS است:
.container {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
border: 1px solid black;
height: 200px;
}
.container > div {
height: 100px;
width: 100px;
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}
و این هم خروجی:
CSS Grid چیست؟
CSS Grid یک سیستم چیدمان است که مکمل Flexbox است. Flexbox قدرتمند است، اما برای انواع خاصی از طرح‌بندی‌ها چندان مناسب نیست. تلاش برای چیدمان ساختار کل یک صفحه با Flexbox به یک کار خسته کننده تبدیل می شود که شامل نشانه گذاری زشت و غیر معنایی و CSS هک می شود.
CSS Grid یک جایگزین Flexbox نیست، بلکه یک سیستم جایگزین برای برخی شرایط است.
پشتیبانی از CSS Grid به اندازه Flexbox گسترده نیست، اما Grid
به خوبی پشتیبانی می شود
در سال 2022
مبانی CSS Grid
مفهوم Grid ساده است. همانطور که از نام آن پیداست، CSS Grid به شما این امکان را می‌دهد که فضای موجود در کانتینر والد را با هر تعداد سطر/ستون که دوست دارید به یک شبکه سطر و ستون تقسیم کنید. پس از آن، موقعیت آیتم های فرزند را با ارجاع به خطوط شبکه والد مشخص می کنید.
با افزودن display: grid به ظرف والد شروع کنید. سپس از ویژگی‌های grid-template-rows و grid-template-columns برای تعیین سطرها و ستون‌هایی که می‌خواهید شبکه را به آنها تقسیم کنید، استفاده کنید. سپس می‌توانید از ویژگی‌های grid-column و grid-row در عناصر فرزند استفاده کنید تا به آنها بگویید در کجای شبکه باید باشند. بیایید به یک مثال Grid نگاهی بیندازیم که از تنظیمات پنج عنصری قبلی استفاده می‌کند، اما در آرایشی پیچیده‌تر.
این HTML است:
<div class="container">
<div>1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
در اینجا CSS است:
.container {
display: grid;
width: 100%;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
border: 1px solid black;
height: 300px;
}
.container > div {
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}
.container > .two {
grid-row: 2;
grid-column: 2;
}
در اینجا خروجی است:
CSS Grid همچنین شامل بسیاری از ویژگی های دیگر است که می توانید از آنها برای ایجاد طرح بندی های پیچیده تر استفاده کنید.
کدام یک را باید استفاده کنید؟
اول، مهم است که توجه داشته باشید که هیچ چیز شما را از استفاده از Flexbox و Grid با هم باز نمی دارد و در برخی موارد، این بهترین انتخاب است. با این اوصاف، اجازه دهید به این سوال پاسخ دهیم که هر یک از این سیستم‌ها برای پیاده‌سازی کدام طرح‌بندی مناسب‌تر هستند.
Flexbox برای طرح‌بندی‌های ساختمانی که شامل تراز کردن و توزیع عناصر در یک خط است، مناسب‌تر است. نمونه‌هایی از این نوع طرح‌بندی عبارتند از تراز کردن نمادها در انتهای یک بخش، یا مرتب کردن پیوندها در نوار ناوبری.
از سوی دیگر، شبکه زمانی که باید عناصر را به طور دقیق نسبت به سایرین (هم به صورت افقی و هم به صورت عمودی) قرار دهید، درخشان‌تر می‌درخشد و برای تطبیق آسان با اندازه‌های مختلف صفحه به این موقعیت نیاز دارید.
برای نشان دادن، در اینجا کدی است که باید بنویسید تا طرح بندی را از مثال Grid با Flexbox بازسازی کنید.
HTML:
<div class="container">
<div class="sub one">
<div>1</div>
<div>5</div>
</div>
<div class="sub two">
<div>2</div>
</div>
<div class="sub three">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.container {
border: 1px solid black;
height: 300px;
}
.sub {
display: flex;
width: 100%;
}
.one, .three {
justify-content: space-between
}
.two {
justify-content: center;
}
.sub > div {
height: 100px;
width: 100px;
background-color: red;
color: white;
font-size: 5rem;
text-align: center;
border-radius: 5px;
}
و این هم خروجی:
نکته اصلی که در اینجا باید به آن توجه کرد این است که در حالی که این کد خروجی مشابهی مانند Grid تولید می کند، نشانه گذاری در اینجا به طور قابل توجهی پیچیده تر است. اجرای این چیدمان به زیر کانتینرهایی نیاز دارد و باید div های شماره گذاری شده را خارج از نظم در نشانه گذاری قرار دهید.
علاوه بر این، فرض کنید باید این طرح‌بندی را به یک موقعیت ناخوشایند تغییر دهید: مثلاً div 5 را با 2 تراز کنید. اگر از Flexbox برای این کار استفاده می کردید، باید به موقعیت متوسل شوید: نسبی یا چیزی مشابه. با استفاده از Grid، تنها چیزی که نیاز دارید این است که ویژگی grid-column را تغییر دهید.
اما، در مقابل، اجرای تراز تک خط ساده از مثال Flexbox با Grid منجر به CSS بسیار بیشتری می شود. واضح است که Grid برای این نوع چیدمان کمتر مناسب است.
در حالی که Flexbox و Grid بیشتر می توانند جلوه های یکدیگر را تکرار کنند، استثناهایی وجود دارد. ایجاد همپوشانی عناصر فقط با Flexbox بسیار سخت است اما با Grid بسیار آسان است. Grid همچنین به عناصر اجازه نمی‌دهد تا مانند Flexbox با margin: auto خود را از عناصر دیگر دور کنند.
Flexbox و Grid سیستم های چیدمان قدرتمندی هستند
Flexbox و CSS Grid هر دو سیستم های طراحی هستند که چیدمان محتوای صفحه وب شما را آسان می کنند. شبکه برای چیدمان های دو بعدی با عناصر زیادی که باید دقیقاً نسبت به یکدیگر قرار گیرند، بهترین است. Flexbox برای چیدمان های تک بعدی یا تک خطی بهتر است، جایی که شما فقط باید دسته ای از عناصر را به روشی مشخص در فضا قرار دهید.