لوگو دویکس
ورود / ثبت نام
flex در CSS

flex در CSS

دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 1 دقیقه آخرین بروز رسانی: 20 بهمن 1399

ویژگی flex در CSS برای شما در این مقاله مورد بررسی قرار گرفته است.

ویژگی flex در CSS

ویژگی flex به شما امکان می دهد نحوه تغییر اندازه آیتم flex را متناسب با فضای ظرف تعریف کنید. در واقع خلاصه ای برای سه زیر خاصیت است:

  • انعطاف پذیر
  • انعطاف پذیر
  • مبنای انعطاف پذیر
#main div {
    -ms-flex: 1; /* Internet Explorer 10 */
    -webkit-flex: 1; /* Safari 6.1 and higher */
    flex: 1;
}

بررسی flex در CSS

ابتدا باید از ویژگی نمایشگر برای تعریف یک ظرف فلکس در CSS استفاده کنید:

نمایشگر: flex؛

اکنون ، نحو برای ویژگی flex CSS به شرح زیر است:

flex: رشد کوچک شدن انعطاف پذیر

شما می توانید مقادیر خاصیت ذکر شده و توضیح داده شده در جدول زیر را پیدا کنید:

Default valueDescriptionValue
0مشخص می کند که این عنصر چه مقدار از فضای موجود در ظرف فلکس را باید اشغال کند.
در اعداد بدون واحد تعریف می شود (یک نسبت).		grow
1مشخص می کند که در صورت عدم وجود فضای کافی کانتینر فلکس ، مقدار عنصر چقدر باید کوچک شود.
در اعداد بدون واحد تعریف می شود (یک نسبت).		shrink
autoاندازه شروع عنصر flex را مشخص می کند. در واحد طول CSS تعریف شده است.basis
همان 1 1 خودکار استauto
همان 0 0 خودکارnone

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊