ویژگی Style flex

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

flex ویژگی تنظیم یا بازگشتی از طول پروژه، در مقایسه با پروژه‌های انعطاف‌پذیر دیگر در داخل همان مخزن.

flex این ویژگی یک ویژگی کوتاه‌نویسی از ویژگی‌های flexGrow، flexShrink و flexBasis است.

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

لطفاً به

دستورالعمل CSS:ویژگی flex

دستورالعمل HTML DOM STYLE:ویژگی flexBasis

دستورالعمل HTML DOM STYLE:ویژگی flexDirection

دستورالعمل HTML DOM STYLE:ویژگی flexFlow

دستورالعمل HTML DOM STYLE:ویژگی flexGrow

دستورالعمل HTML DOM STYLE:ویژگی flexShrink

دستورالعمل HTML DOM STYLE:ویژگی flexWrap

مثال

برای اینکه طول همه پروژه‌های انعطاف‌پذیر یکسان باشد، بدون توجه به محتوای آن‌ها:

برای (i = 0; i < y.length; i++) {
  y[i].style.flex = "1";
}

آزمایش شخصی کنید

نحوه نوشتن

بازگشتی از ویژگی flex:

object.style.flex

تنظیم ویژگی flex:

object.style.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
مقدار بازگشتی: رشته، که نشان‌دهنده ویژگی flex.
نسخه CSS: CSS3

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی 11.0 پشتیبانی 9.0 پشتیبانی