62. اختصار عنصر Flex: flex

خاصية flex هي الاختصار لـ flex-grow و flex-shrink و flex-basis. يوصى بشدة باستخدام الاختصار بدلاً من الخصائص الفردية.

النحو (Syntax)

flex: <flex-grow> <flex-shrink> <flex-basis>;

قوالب الاختصار الشائعة

1. flex: 0 1 auto; (الافتراضي / بحجم المحتوى)

• grow: 0 (لن ينمو).
• shrink: 1 (سينكمش إذا لزم الأمر).
• basis: auto (الحجم الأساسي يتحدد بالمحتوى أو العرض/الارتفاع).

2. flex: 1; (توزيع متساوٍ)

هذا اختصار لـ flex: 1 1 0;.

• grow: 1 (يأخذ حصة متساوية من المساحة الإضافية).
• shrink: 1 (يسمح بالانكماش).
• basis: 0 (الحجم الأولي هو صفر؛ تتم مشاركة كامل المساحة المتاحة بناءً على نسبة النمو).

css .item-equal { flex: 1; /* مثالي للأعمدة التي يجب أن تملأ الأب دائماً */ }

3. flex: none; (حجم ثابت)

اختصار لـ flex: 0 0 auto;.

• لن ينمو ولن ينكمش. يحافظ العنصر على حجمه المحدد بواسطة width أو المحتوى.

css .fixed-item { width: 100px; /* مضمون 100 بكسل */ flex: none; }