جعبه فلکس یا شبکه! مشکل این است. اگر سابقه شما در زمینه طراحی وب و برنامه نویسی سمت کاربر است، انتخاب بین Flexbox و Grid مطمئنا یکی از سوالات اصلی شما خواهد بود. در پاسخ به سوال فلکس باکس یا گرید بهتر است بدانید که هر کدام کاربرد خاصی در جای خود دارند و بنابراین نمی توانید ماژول فلکس باکس و گرید را به طور کامل رها کنید یا یکی از آن ها را بهتر از دیگری در نظر بگیرید.
مدرک مقدماتی
برای وارد کردن رتبه بهتر است معنی این کلمه را بدانید. Grid در ساختار CSS به معنی گرید یا شبکه ای است که در صفحه HTML برای ارائه محتوا یا مرزبندی محتوا استفاده می شود و می توانید از ماژول Grid برای تقسیم بخشی از صفحه به قسمت های مختلف استفاده کنید.
توجه داشته باشید که در مورد شبکه، این شبکه و تقسیم بندی به دو صورت سطر و ستون است. بنابراین، با مقایسه Flexbox و Grid، بهتر است از شبکه برای شبکه بندی بخشی از صفحه به روش های مختلف استفاده کنید. دادن سبک های مختلف و اعمال تنظیمات بر روی ساختار شبکه آسان است، و این یک ویژگی عالی CSS است که توانایی اختصاص سطرها و ستون های مختلف در یک قسمت از صفحه را فراهم می کند.
استفاده از Flexbox و Grid به بهبود تجربه کاربری یک وب سایت کمک می کند و می توانید عملکرد مناسب و بهینه این مزیت CSS را در مرورگرهای وب مختلف مشاهده کنید. در صورت نیاز به تنظیم رنگ پس زمینه، فاصله بین سلول ها و اندازه آنها، این کار به راحتی با تنظیمات CSS امکان پذیر خواهد بود و این تابع تمامی تنظیمات را برای دستیابی به نتیجه دلخواه در اختیار شما قرار می دهد.
معرفی فلکس باکس
برای معرفی فلکس باکس بهتر است با کاربرد آن آشنا شوید. Flexbox و Grid ماژول های طرح بندی هستند که از Flexbox برای ایجاد شبکه های خطی پاسخگو استفاده می کنند. این ماژول توسط اکثر مرورگرهای وب مانند کروم و فایرفاکس پشتیبانی می شود و با استفاده از آن می توانید بدون اتلاف وقت یک مدل سلولی ریسپانسیو ساید بای ساید طراحی و پیاده سازی کنید.
با Flexbox کنترل زیادی روی سلول ها و نحوه چیدمان آن ها دارید و زمانی که بخش مورد نظر را در HTML ایجاد کردید، می توانید تنظیمات آن را روی ساختار CSS مورد نظر اعمال کنید. امکان اعمال کدهای رنگی مختلف، تنظیم فاصله و اندازه سلول ها وجود دارد و بخش CSS تنظیمات ویژه قرار دادن فلکس باکس را پوشش می دهد. برای مثال، می‌توانید سلول‌ها را طوری تنظیم کنید که بعد از قرار گرفتن در مرکز قرار گیرند یا فاصله مشخصی بین آنها وجود داشته باشد.
مزایا و معایب فلکس باکس و گرید
پس از معرفی این دو ویژگی، بهتر است در مورد مزایا و معایب فلکس باکس و گرید اطلاعاتی کسب کنید.
همانطور که در وب سایت tutsplus اشاره شد، مزیت مهم flexbox مناسب بودن آن برای چیدمان عناصر در یک ردیف یا در یک ستون است. هنگامی که مطمئن هستید که عناصر در یک ستون یا در یک ردیف قرار می گیرند، بهترین گزینه flexbox است که در این حالت قدرت بیشتری ارائه می دهد.
اما گرید در مواردی استفاده می شود که عناصر در چند سطر یا ستون باید در کنار هم قرار گیرند و در این اپلیکیشن بهترین قابلیت ها را ارائه خواهد کرد. سرعت Grid در مقایسه با Flexbox بهتر است و این ویژگی به طراحان و برنامه نویسان اجازه می دهد تا مراحل طراحی را به سرعت طی کنند.
اگر سرعت، سهولت و عملکرد بهتر برای شما مهم است و می توانید از Grid در اپلیکیشن مورد نظر خود استفاده کنید، اصلا در استفاده از آن تردید نکنید.
مقایسه کد در Grid و Flexbox
برای مقایسه کد در گرید و فلکس باکس، بهتر است از شبکه شروع کنیم، جایی که می توان عناصر را یکی پس از دیگری مرتب کرد.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #E491E3;
padding: 20px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 30px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>با ذخیره این کد در یک فایل html و اجرای آن از مرورگر، خروجی زیر را در صفحه مورد نظر دریافت خواهید کرد.
فلکس باکس علاوه بر گرید شرایطی را نیز در اختیار شما قرار می دهد تا بتوانید المان های مورد نظر را پشت سر هم بچینید و این چیدمان به صورت ریسپانسیو در مرورگر قابل مشاهده است.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: rgba(200, 200, 200, 200);
border: 1px solid rgba(0, 0, 0, 0.8);
}
.flex-container > div {
background-color: #E491E3;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>اگر این کد را در مرورگر اجرا کنید، می توانید خروجی زیر را مشاهده کنید.
چه چیزی هر کدام را بهتر می کند؟
به طور کلی بهتر است بدانید که تابع شبکه دو بعدی است و به همین دلیل می توان با استفاده از شبکه، عناصر را با عقربه باز مرتب کرد. در مورد فلکس باکس، این چیدمان یک بعدی است و المان ها در یک ردیف چیده شده اند.
البته حواستان باشد که در پروژه طراحی وب قطعا هر دو گزینه مورد نیاز است و نمی توان یکی از آنها را به طور کامل حذف کرد.
نتیجه
انتخاب بین فلکس باکس یا گرید بستگی به شرایط و نیاز دارد و باید با توجه به محتوای وب و صفحه طراحی شده یکی یا هر دو را انتخاب و استفاده کنید. توانایی همپوشانی عناصر در یک شبکه آسان‌تر است و شبکه مزایای بزرگی را برای طراح ایجاد می‌کند تا شبکه‌های سفارشی عناصر را در صفحه HTML ایجاد کند. اگر در مورد استفاده و خروجی گرفتن از Grid و Flexbox سوالی دارید می توانید در مقاله زیر بپرسید.