CSS فلیکس پراپرٹی

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

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

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

توضیحات:اگر عنصر یک پروژه ارتجاعی نیست، خاصیت flex نامعتبر است.

دوسری مراجع:

کورس: CSS فلیکس فیری

مشارکت:CSS فلیکس بیسی پراپرٹی

مشارکت:CSS فلیکس ڈائریکشن پراپرٹی

مشارکت:CSS فلیکس فلو پراپرٹی

مشارکت:CSS فلیکس گروو پراپرٹی

مشارکت:CSS فلیکس شروک پراپرٹی

مشارکت:CSS فلیکس ویپ پراپرٹی

مشارکت: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

آئٹم کی لمبائی

قانونی قیمت: "آوتو"، "وارسس"، یا "%"، "px"، "em" کی اکائی کا استعمال، یا کسی دیگر اکائی کا استعمال، یا کسی دیگر طول کا استعمال۔
آوتو 1 1 auto کے برابر ہے۔
ابتدائی 0 0 auto کے برابر ہے۔ دیکھئے: ابتدائی。
خالی 0 0 auto کے برابر ہے۔
وارسس اس کی پرانے عنصر سے اس کی وارسس لی جاتی ہے۔ دیکھئے: وارسس。

تکنیکی تفصیلات

مقصد: 0 1 auto
وارسس: نہیں
اینیمیشن کا تعمیر: پشتیبنداینیمیشن سے متعلق اپرائز。
ورژن: CSS3
جاوا اسکریپت گرامر: object.style.flex="1"

مزید مثال

فلیکس اور میڈیا کو مشترکہ طور پر مختلف اسکرین سائز/دستیز کے لئے مختلف لائجت بنائیں:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* ریسپانسیو لائجت - دو ستون کی بجائے ایک ستون (100%) بنائیں */
@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