CSS: عناصر Flexbox CSS
آخر تحديث: 2026-10-13
خصائص عناصر Flexbox تمنحك تحكماً دقيقاً في الأبناء داخل حاوية flex.
1. خصائص عناصر Flex
(1) مرجع سريع
| الخاصية | القيم | الغرض |
|---|---|---|
flex-grow |
0، 1، 2، ... |
مقدار نمو العنصر بالنسبة لإخوته |
flex-shrink |
0، 1، 2، ... |
مقدار انكماش العنصر بالنسبة لإخوته |
flex-basis |
auto، 100px، 50% |
الحجم الأولي قبل النمو/الانكماش |
flex |
1، 0 0 200px، 1 1 auto |
اختصار لـ grow، shrink، basis |
order |
0، 1، -1 |
ترتيب بصري (لا يؤثر على DOM) |
align-self |
auto، flex-start، flex-end، center |
تجاوز align-items للأصل |
2. flex-grow
يتحكم في مقدار نمو عنصر flex بالنسبة لعناصر أخرى:
▶ مثال
▶ جرّب الكود3. flex: 1 اختصار
flex: 1 هو الاختصار الأكثر شيوعاً:
▶ مثال
▶ جرّب الكودflex: 1 يعني flex-grow: 1; flex-shrink: 1; flex-basis: 0% — "لينمو لملء المساحة المتبقية بالتساوي."
4. order
يُغيّر الترتيب البصري without التأثير على ترتيب DOM:
▶ مثال
▶ جرّب الكودملاحظة: order يُغيّر فقط الترتيب البصري، وليس ترتيب DOM. قارئات الشاشة تتبع ترتيب DOM.
5. align-self
يتجاوز align-items الأصل لعناصر فردية:
▶ مثال
▶ جرّب الكود❓ أسئلة شائعة
س ماذا يعني flex: 1؟
ج
flex: 1 هو اختصار لـ flex-grow: 1; flex-shrink: 1; flex-basis: 0% — يعني "لينمو لملء المساحة المتبقية." عندما يكون لعدة عناصر flex: 1، تشترك بالتساوي في عرض الحاوية.س هل يؤثر order على بنية DOM؟
ج لا.
order يُغيّر فقط الترتيب البصري، ترتيب DOM يبقى كما هو. قارئات الشاشة تتبع ترتيب DOM، لذا لا تستخدم order للفرز البصري فقط — يؤثر على إمكانية الوصول.س أيهما أولوية أعلى: align-self أم align-items؟
ج
align-self له أولوية أعلى. يعمل على عناصر فردية، متجاوزاً align-items الأصل. مثلاً، الأصل يضبط align-items: center لمحاذاة مُوَسَّطة، لكن الابن يمكنه ضبط align-self: flex-start للمحاذاة للأعلى بشكل فردي.📖 ملخص
- خصائص عناصر Flexbox تتيح لك التحكم الدقيق في ترتيب وحجم كل ابن
flex: 1هو اختصار التقسيم المتساوي الأكثر شيوعاً؛orderيُضبط الترتيب البصري without تغيير HTML؛align-selfتتيح للعناصر الفردية "التميز"- تذكر: خصائص الحاوية تتحكم في العام، خصائص العنصر تتحكم في الفردي
📝 تمارين
- أنشئ حاوية flex بـ 5 عناصر. استخدم
orderلإظهار العنصر الثالث أولاً والعنصر الأول أخيراً. - استخدم
flex-growلتنفيذ "ثلاثة أعمدة متساوية"، ثم اجعل العمود الأوسط ضعف عرض الجوانب. - أنشئ تخطيط "شريط جانبي ثابت + محتوى متكيف": الشريط الجانبي يستخدم
flex: 0 0 250px، المحتوى يستخدمflex: 1. - في حاوية، حاذ العنصران الأولان للأعلى والثالث لأسفل باستخدام
align-self.
