تعمّق في Flexbox: المحاذاة والالتفاف والترتيب
أتقن justify-content وalign-items وalign-self وflex-wrap وflex-grow وflex-shrink وflex-basis وخاصية order.
تعمّق في Flexbox: المحاذاة والالتفاف والترتيب درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
مراجعة: حاوية Flexbox والعناصر المرنة
مراجعة: تؤدي display: flex على الحاوية إلى إنشاء عناصر Flexbox من الأبناء المباشرين. يمتد المحور الرئيسي بمحاذاة flex-direction. أما المحور المتقاطع فيكون عموديًا عليه.
قيم justify-content بالتفصيل
جميع قيم justify-content في حاوية ذات اتجاه صفّي: flex-start (الافتراضية)، وflex-end، وcenter، وspace-between (فجوات بين العناصر فقط)، وspace-around (هامش متساوٍ حول كل عنصر)، وspace-evenly (فجوات متساوية في كل المواضع).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }align-items مقارنةً بـ align-content
تعمل align-items على محاذاة العناصر ضمن سطر واحد. أما align-content فتعمل على محاذاة عدة أسطر، ولا تعمل إلا عندما تكون flex-wrap مضبوطة على wrap وتوجد عدة أسطر.
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}align-self على العناصر الفردية
تتجاوز align-self قيمة align-items لعنصر Flexbox محدد. يفيد ذلك في جعل عنصر واحد يتمدد بينما تكون العناصر الأخرى في المنتصف.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */flex-wrap: wrap وwrap-reverse
تسمح flex-wrap: wrap بانتقال العناصر إلى أسطر جديدة. أما wrap-reverse فتُجري الالتفاف ولكن في الاتجاه المعاكس. ادمجها مع gap لإنشاء شبكات متجاوبة بسيطة.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}flex-grow وflex-shrink وflex-basis
هذه هي الأجزاء الثلاثة للاختصار flex المطبق على العناصر. تحدد flex-grow حصة المساحة المتاحة، ويحدد flex-shrink معدل التقلص عندما تضيق المساحة، بينما تحدد flex-basis الحجم الأولي قبل النمو أو التقلص.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */اختصارات flex الشائعة
flex: 1 = 1 1 0%. وflex: auto = 1 1 auto. وflex: none = 0 0 auto. وflex: 2 = 2 1 0% (يستحوذ على مساحة تعادل ضعف المساحة التي يستحوذ عليها flex: 1).
خاصية order
تغيّر order الترتيب المرئي لعناصر Flexbox من دون تعديل HTML. القيمة الافتراضية هي 0. تظهر القيم السالبة قبل 0. استخدمها بحذر — فعدم التطابق بين الترتيب المرئي وترتيب DOM قد يربك مستخدمي لوحة المفاتيح وقارئات الشاشة.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */min-width: 0 لإصلاح مشكلة تجاوز المحتوى
تملك عناصر Flexbox ضمنيًا min-width: auto، ما يعني أنها لن تتقلص إلى أقل من حجم محتواها. عيّن min-width: 0 للسماح لها بالتقلص إلى حجم أصغر — وهذا ضروري لاقتطاع النص داخل عناصر Flexbox.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}فجوات Flex من دون gap
في البيئات الأقدم التي لا تدعم gap، استخدم الهوامش على العناصر والهامش السالب على الحاوية لإنشاء مسافات فاصلة. لكن gap مدعوم اليوم في جميع المتصفحات الحديثة — لذا يُفضّل استخدامه.
حاويات Flex المتداخلة
يمكن لأي عنصر Flexbox أن يكون حاوية Flexbox بحد ذاته. استخدم Flexbox المتداخل للتخطيطات المعقدة: صف من البطاقات تكون العناصر الداخلية لكل بطاقة فيه مرتبة أيضًا باستخدام Flexbox. هذا هو النمط المعتاد في التخطيطات الحديثة.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}تحقق سريع
أي خاصية توزّع المساحة بين عناصر Flexbox على طول المحور المتقاطع عندما تكون flex-wrap مضبوطة على wrap؟
مراجعة: التعمق في Flexbox
استخدم justify-content لتوزيع العناصر على المحور الرئيسي. واستخدم align-items للمحور المتقاطع في السطر الواحد. واستخدم align-content للمحور المتقاطع في عدة أسطر. أما align-self فتُستخدم لكل عنصر على حدة. تتيح flex-wrap: wrap عدة أسطر. ويتحكم اختصار flex في النمو والتقلص والحجم الأساسي. وتغيّر order الترتيب المرئي. وتمنع min-width: 0 مشكلات التقلص.
الأسئلة الشائعة
هل درس «تعمّق في Flexbox: المحاذاة والالتفاف والترتيب» مجاني؟
نعم — نص درس «تعمّق في Flexbox: المحاذاة والالتفاف والترتيب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «تعمّق في Flexbox: المحاذاة والالتفاف والترتيب»؟
أتقن justify-content وalign-items وalign-self وflex-wrap وflex-grow وflex-shrink وflex-basis وخاصية order. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «تعمّق في Flexbox: المحاذاة والالتفاف والترتيب»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تعمّق في Flexbox: المحاذاة والالتفاف والترتيب
- شبكة CSS: template-areas وauto-fit وminmax
- دمج Flexbox وGrid
- متغيرات CSS لتنسيق السمات