خاصية تخطيط Flex
آخر تحديث: 2026-09-13
flex خاصية تخطيط Flex
الخاصية flex هي الاختصار الأساسي في وحدة CSS Flexible Box Layout. تحدد كيف ينمو عنصر flex ويقلص وكم مساحة يشغل بالنسبة للفضاء المتبقي في الحاوية. وهي اختصار لـ flex-grow و flex-shrink و flex-basis، التي تتحكم في معامل النمو ومعامل التقلص والحجم الأولي على المحور الرئيسي للعنصر. باستخدام flex، يسهل بناء تخطيطات شائعة مثل الأعمدة متساوية العرض والعروض المتدفقة والترتيبات الانسيابية.
| الفئة | |
|---|---|
| القيمة الأولية | 0 1 auto |
| موروث | لا |
| ينطبق على | عناصر flex |
| نوع الحركة | length |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
flex: none | auto | initial | <flex-grow> <flex-shrink>? <flex-basis>?;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | auto | initial | كلمة مفتاحية | قيم flex محددة مسبقًا. |
<flex-grow> <flex-shrink>? <flex-basis>? | القيمة | قيم flex-grow/flex-shrink/flex-basis. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： flex: 1; هو اختصار لـ flex: 1 1 0%. يمكن للعنصر أن ينمو ويقلص ويبدأ من حجم أساسي 0، وهي الطريقة النموذجية لجعل العناصر تتشارك الفضاء المتبقي بالتساوي.
تحذير： flex: none; تُعادل flex: 0 0 auto. لا ينمو العنصر ولا يقلص ويُحدَّد حجمه فقط من محتواه أو عرض/ارتفاع صريح. استخدمها للأشرطة الجانبية أو الأزرار ذات الحجم الثابت.
❓ الأسئلة الشائعة
Qما الفرق بين flex: 1 و flex: auto؟
Aflex: 1 هو اختصار لـ flex: 1 1 0%. الحجم الأساسي هو 0، لذا يُعاد توزيع العرض بالكامل بالتناسب وتصبح عناصر flex: 1 متساوية العرض تمامًا. أما flex: auto فهو اختصار لـ flex: 1 1 auto: يُحدَّد حجم كل عنصر أولًا من محتواه أو عرضه، ثم يُقسم الفضاء المتبقي بالتناسب، فالعناصر الأكثر محتوى تأخذ مساحة أكبر. استخدم flex: 1 للتقسيمات متساوية العرض و flex: auto عندما تريد أن يتبع الحجم المحتوى.
Qمتى ينبغي استخدام اختصار flex بدل الخصائص الفرعية المنفصلة؟
Aفي معظم الحالات يُعد اختصار flex الخيار الأفضل لأنه يضبط flex-grow و flex-shrink و flex-basis في إعلان واحد ويتجنب مفاجأة عودة flex-basis إلى الافتراضي 0 عندما تكتب flex-grow فقط. كما أنه يوضح القصد بلمحة، ويجعل الحجم الأساسي صريحًا وأسهل مراجعة من ثلاث إعلانات متفرقة. استخدم الخصائص المفصلة فقط عند الحاجة إلى تجاوز خاصية فرعية واحدة، مثل تغيير flex-basis فقط داخل media query.
Qلماذا يلتف النص داخل عناصر flex: 1 أو ينضغط؟
Aسبب ذلك هو الافتراضي min-width: auto لعناصر flex: عند نفاد المساحة، يُشتق الحد الأدنى لحجم العنصر من محتواه، فالنص الطويل يُبقي العنصر عريضًا ويلتف النص أو يفيض. عالج ذلك بضبط min-width: 0 على العنصر (min-height: 0 لاتجاه column) واجمعه مع overflow: hidden و text-overflow: ellipsis للحصول على قطع في سطر واحد.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
Flex Grow
يتحكم في مقدار نمو عنصر flex.
اتجاه المحور الرئيسي
يحدد اتجاه المحور الرئيسي في تخطيط flex.
