علیرضا

وبلاگ شخصی

۱ مطلب در تیر ۱۴۰۱ ثبت شده است

تفاوت میان Flexbox و Grid در CSS

توسط : علیرضا آهنی

در تاریخ : شنبه, ۱۱ تیر ۱۴۰۱، ۰۱:۱۱ ب.ظ

Flexbox و Grid دو شیوه نمایش و جایگذاری المان ها در CSS هستند. یکی از مشکلات در CSS جایگذاری المان ها در صفحه به شیوه واکنش گرا و مناسب برای هر صفحه نمایشگری هست، برای حل این مشکل چندین روش هست: 

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

استفاده از float و width

 

در این روش با استفاده از ویژگی float ستون ها را در سمت چپ قرار میدهیم. سپس اندازه عرض هر بخش را بطور مساوی تقسیم میکنیم و با ویژگی width تغییر میدهیم، برای واکنش گرا سازی آن با استفاده از media query مقدار عرض را 100 درصد قرار میدهیم:

* {
  box-sizing: border-box;
}

.column {
    float: left;
    width: 33.33%;
    padding: 1em;
    border: 0.1em solid black;
    background-color: #f1f1f1;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 800p) {
    .column {
        width: 100%;
    }
}

این روش برای موارد کوچک و ساده به خوبی کار میکنه، اما با جایگذاری ها و طراحی های پیچیده تر سخت تر میشود. 

نکته طراحی واکنش گرا: از واحد em یا rem بجای px استفاده کنید! این مقادیر بطور خودکار توسط مرورگر به مقادیر px مناسب برای هر صفحه نمایشگر تبدیل میشوند. 

16px = 1em 

استفاده از Flexbox

Flexbox برای جایگذاری المان ها به شیوه یک بعدی ( یا ستونی یا سطری ) ساخته شده. برای استفاده از Flexbox شما نیاز به یک المان پدر و چند المان فرزند دارید. 

المان پدر شیوه قرار گیری هر المان فرزند رو تایین میکنه. همچنین المان پدر تایین میکنه المان ها به شیوه ستونی باشند یا سطری. برای اطلاعات بیشتر از المان پدر در Flexbox از این آموزش W3Schools استفاده کنید.

المان های فرزند میتونند ترتیب قرار گیری خود، اندازه نسبت به المان های فرزند و طول اولیه خود رو تایین کنند. برای اطلاعات بیشتر از المان فرزند در Flexbox از این آموزش W3Schools استفاده کنید. 

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.column {
    flex: 33.33%;
    padding: 1em;
    border: 0.1em solid black;
    background-color: #f1f1f1;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    background-color: DodgerBlue;
}

@media (max-width: 800px) {
    .column {
        flex: 100%;
    }
}

استفاده از Grid

Grid برای جایگذاری المان ها به شیوه دو بعدی ( ستونی و سطری ) ساخته شده. برای استفاده از Grid شما نیاز به یک المان پدر و چند المان فرزند دارید. بر خلاف Flexbox برای ایجاد چندین ردیف، نیازی به چندین المان پدر نیست و برخلاف float نیازی به سروکله زدن با position نیست. 

 

body {
    margin: 0;
}

.column {
    padding: 1em;
    border: 0.1em solid black;
    background-color: #f1f1f1;
}

.row {
    display: grid;
    grid-template-columns: auto auto auto;
}

@media (max-width: 800px) {
    .row {
        grid-template-columns: auto;
    }
}

قدرت اصلی Grid در طراحی قالب ها هست که نیاز به ردیف ها با طول متفاوت و متغییر هست. همچنین میزان کد نوشته شده برای Grid کمتر است ( فقط کلاس row مهم است ) 

بطور کلی این مطلب رو میشه اینطور خلاصه کرد: 

شیوه های مختلف چینش در CSS
شیوه مزایا معایب
Float سادگی، پشتیبانی بیشتر قدیمی، سخت برای طراحی های پیچیده تر
Flexbox مدرن و واکنشگرا تک بعدی
Grid دو بعدی، المان های فرزند با اندازه های مختلف و چینش مختلف تعداد زیاد ویژگی ها

 

من خودم در پروژه های جدیدترم از Grid و یا bootstrap استفاده میکنم، اما float در قالب های قدیمی تر خیلی استفاده شده ( همین قالبی که این مطلب رو نمایش میده با float نوشته شده ) و بیشتر مواقع مشکلی ایجاد نمیکنه.

 

پ.ن: ادیتور فعلی بیان افتضاحه و من حتی اون رو به یک textarea با فرمت Markdown هم ترجیح نمیدم indecision