الخاصية flex في CSS هي اختصار لـ النمو المرن، الانكماش المرن، والأساس المرن. إنه يعمل فقط على العناصر المرنة، لذا إذا لم يكن عنصر الحاوية عنصرًا مرنًا، فإن ثني الخاصية لن تؤثر على العنصر المقابل.

يتم استخدام هذه الخاصية لتعيين طول العناصر المرنة. يعد تحديد موضع العناصر الفرعية والحاوية الرئيسية أمرًا سهلاً باستخدام خاصية CSS هذه. يتم استخدامه لتعيين كيفية انكماش العنصر المرن أو نموه ليناسب المساحة.

ال ثني يمكن تحديد الخاصية بقيمة واحدة أو اثنتين أو ثلاث قيم.

• عندما يكون هناك بناء جملة ذو قيمة واحدة، يجب أن تكون القيمة إما رقمًا أو كلمات رئيسية مثل لا شيء, أو أولي .
• عندما يكون هناك بناء جملة ذو قيمتين، يجب أن تكون القيمة الأولى رقمًا (يستخدم كـ تنمو المرن )، يمكن أن تكون القيمة الثانية رقمًا (يُستخدم لـ المرن يتقلص ) أو قيمة عرض صالحة (تُستخدم كـ أساس مرن ).
• عندما يكون هناك بناء جملة ثلاثي القيم، فيجب أن تتبع القيم الترتيب: أ رقم ل نمو مرن, أ رقم ل انكماش مرن, وصالحة عرض قيمة ل أساس مرن .

بناء الجملة

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

قيم الملكية

النمو المرن: وهو رقم موجب بدون وحدة يحدد عامل النمو المرن. فهو يحدد مقدار نمو العنصر مقارنة بالعناصر المرنة الأخرى. القيم السلبية غير مسموح بها. إذا تم حذفه، فإنه يحدد القيمة 1 .

الانكماش المرن: إنه الرقم الموجب بدون وحدة الذي يحدد عامل الانكماش المرن. فهو يحدد مقدار انكماش العنصر مقارنةً بالعناصر المرنة الأخرى. القيم السلبية غير مسموح بها. إذا تم حذفه، فإنه يحدد القيمة 1 .

الأساس المرن: إن الطول بالوحدات النسبية أو المطلقة هو الذي يحدد الطول الأولي للعنصر المرن. يتم استخدامه لضبط طول العنصر المرن. يمكن أن تكون قيمها سيارة ورث, أو رقم متبوعًا بوحدات الطول مثل م بكسل, الخ. القيم السالبة غير مسموح بها. إذا تم حذفه، فإنه يحدد القيمة 0 .

آلي: هذه القيمة للخاصية المرنة تعادل 1 1 تلقائي .

لا أحد: هذه القيمة للخاصية المرنة تعادل 0 0 تلقائي . لا ينمو ولا يتقلص العناصر المرنة.

أولي: يقوم بتعيين الخاصية إلى قيمتها الافتراضية. وهو ما يعادل 0 0 تلقائي .

يرث: يرث الخاصية من العنصر الأصلي.

مثال

في هذا المثال، هناك ثلاث حاويات، تحتوي كل منها على ثلاثة عناصر مرنة. ال عرض وارتفاع الحاويات هي 300 بكسل و 100 بكسل .

نحن نطبق فليكس: 1؛ إلى العناصر المرنة للحاوية الأولى، فليكس: 0 50 بكسل؛ إلى العناصر المرنة للحاوية الثانية، و فليكس: 2 2؛ إلى العناصر المرنة للحاوية الثالثة.

 CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> 

انتاج |