💪🏿بیایید خم شویم. . .

ek3nk4r 2023-07-05

0 31 خواندن این مطلب 2 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

آیا تا به حال در مورد تفاوت بین مقادیر نمایشگر فکر کرده اید block، flex، inline-flex و inline-block ?

block و inline-block به ترتیب برای ایجاد عناصر در سطح بلوک و سطح درون خطی استفاده می شود. block عناصر تمام عرض موجود را می گیرند و یک خط جدید ایجاد می کنند، در حالی که inline-block المان‌ها فقط به اندازه‌ای که لازم است عرض می‌گیرند و به عناصر دیگر اجازه می‌دهند که در همان خط در کنار آنها بنشینند.

flex و inline-flex برای ایجاد ظروف انعطاف پذیری استفاده می شود که می تواند اندازه و موقعیت عناصر فرزند خود را تنظیم کند. flex کانتینرها عناصر سطح بلوک هستند، در حالی که inline-flex کانتینرها عناصری در سطح درون خطی هستند که می‌توانند در کنار سایر عناصر قرار گیرند. تفاوت اصلی بین flex و inline-flex جهتی است که اقلام در آن چیده می شوند. به صورت پیش فرض، flex موارد را پشت سر هم می چیند، در حالی که inline-flex موارد را در یک خط در امتداد محور درون خطی قرار می دهد.

همه جملات بالا به چه معناست؟ من نمی دانم که NotionAi این را گفته است. حالا بذار مال خودم رو بهت بگم😊.

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

<div class="wrap">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>
<div class="wrap">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>

بیایید مقداری css به آن اضافه کنیم.

.wrap {
        /* display: flex; */ 
        /* display: inline-flex; */
                /* display: inline-block; */
        border: 3px solid blue;
        padding: 5px;
        margin: 30px;
    }

    .child {
        border: 2px solid green; 
        margin: 5px 2px;
        padding: 3px;
        text-align: center;
    }

همانطور که از مطالب بالا می بینید html و css

ما دو مجموعه سه تایی فرزند داریم div عناصر پیچیده شده در والد div عناصر با کلاس wrap. حالا بیایید مقادیر مختلف نمایشگر را برای والد اعمال کنیم div عناصر را ببینید و ببینید که چگونه بر چیدمان کودک تأثیر می گذارد div عناصر.

block: wrap عناصر تمام عرض موجود را اشغال می کنند و عناصر فرزند در یک طرح بندی بلوکی نمایش داده می شوند، با هر عنصر فرزند عرض کامل عنصر والد را گرفته و در یک خط جدید ظاهر می شوند.

💡 به یاد داشته باشید: block مقدار پیش فرض تگ div است

توضیحات تصویر

inline-block: wrap المان‌ها فقط به اندازه‌ای که لازم است عرض می‌گیرند و همچنین در طرح‌بندی درون خطی نمایش داده می‌شوند، اما عناصر فرزند در یک طرح‌بندی بلوکی نمایش داده می‌شوند و هر عنصر فرزند فقط به اندازه‌ای که لازم است عرض می‌گیرد.

توضیحات تصویر

flex: wrap عناصر به ظروف انعطاف پذیر تبدیل می شوند که می توانند اندازه و موقعیت عناصر فرزند خود را تنظیم کنند. به طور پیش فرض، عناصر فرزند در یک ردیف قرار می گیرند، اما wrap عنصر هنوز در طرح بلوکی است.

توضیحات تصویر

inline-flex: wrap عناصر به محفظه‌های انعطاف‌پذیری تبدیل می‌شوند که می‌توانند اندازه و موقعیت عناصر فرزند خود را تنظیم کنند، و آنها به صورت مستقیم با عناصر دیگر نمایش داده می‌شوند. به طور پیش فرض و همچنین عناصر فرزند نیز در طرح بندی درون خطی نمایش داده می شوند.

توضیحات تصویر