ویژگی flex CSS

تعریف و استفاده

flex کوتاه‌نویسی از یکی از موارد زیر است:

تنظیمات flex طول انعطاف‌پذیر پروژه‌ها را تنظیم می‌کند.

نکات:اگر عنصر پروژه‌ی انعطاف‌پذیر نباشد، خاصیت flex معتبر نیست.

لطفاً به: مراجعه کنید

تدریس: CSS Flexbox

منبع:ویژگی flex-basis CSS

منبع:ویژگی flex-direction CSS

منبع:ویژگی flex-flow CSS

منبع:ویژگی flex-grow CSS

منبع:ویژگی flex-shrink CSS

منبع:ویژگی flex-wrap CSS

منبع:ویژگی flex در HTML DOM

مثال

مهم نیست که محتوای آن چگونه است، طول همه عنصرهای انعطاف‌پذیر را یکسان کنید:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

آزمایش کنید

جمله‌بندی CSS

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

مقدار ویژگی

مقدار توضیح
flex-grow عدد، مقدار انبساط عنصر نسبت به بقیه عنصرهای انعطاف‌پذیر را مشخص می‌کند.
flex-shrink عدد، مقدار انقباض عنصر نسبت به بقیه عنصرهای انعطاف‌پذیر را مشخص می‌کند.
flex-basis

طول عنصر.

مقدار مجاز: "auto"،"inherit"، یا مقدارهایی با واحد "%"،"px"،"em"، یا هر واحد طول دیگر.
auto معادل 1 1 auto است.
initial معادل 0 1 auto است. ببینید: initial.
none معادل 0 0 auto است.
inherit این ویژگی از عنصر والد خود ارث می‌برد. ببینید: inherit.

جزئیات فنی

مقدار پیش‌فرض: 0 1 auto
وراثت: خیر
انیمیشن: پشتیبانی می‌شود. لطفاً به ویژگی‌های جداگانه مراجعه کنید. ببینید:ویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
جمله‌بندی JavaScript: object.style.flex="1"

مثال‌های بیشتر

با استفاده از flex و پرسش‌های رسانه‌ای، برای اندازه‌های صفحه/دستگاه‌های مختلف، قالب‌بندی‌های مختلفی ایجاد کنید:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* قالب‌بندی پاسخگو - ساخت یک ستون (100%) به جای دو ستون (50%) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

آزمایش کنید

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

اعداد شماری در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را به طور کامل پشتیبانی می‌کنند.

اعداد شماری با -webkit-،-ms- یا -moz- نشان‌دهنده نسخه اولیه با استفاده از پیشوند است.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0