عناصر Flexbox CSS

خصائص عناصر Flexbox تمنحك تحكماً دقيقاً في الأبناء داخل حاوية flex.

خصائص عناصر Flex

مرجع سريع

الخاصية	القيم	الغرض
`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 للأصل

flex-grow

يتحكم في مقدار نمو عنصر flex بالنسبة لعناصر أخرى:

مثال

HTML

<style>
.container {
  display: flex;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item-1 { flex-grow: 1; background: #3498db; padding: 10px; color: white; }
.item-2 { flex-grow: 2; background: #e74c3c; padding: 10px; color: white; }
.item-3 { flex-grow: 1; background: #2ecc71; padding: 10px; color: white; }
</style>
<div class="container">
  <div class="item-1">grow: 1</div>
  <div class="item-2">grow: 2 (ضعف العرض)</div>
  <div class="item-3">grow: 1</div>
</div>

▶ جرّب الكود

flex: 1 اختصار

flex: 1 هو الاختصار الأكثر شيوعاً:

مثال

HTML

<style>
.container {
  display: flex;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  flex: 1;
  background: #9b59b6;
  padding: 10px;
  color: white;
  text-align: center;
}
</style>
<div class="container">
  <div class="item">مساوٍ</div>
  <div class="item">مساوٍ</div>
  <div class="item">مساوٍ</div>
</div>

▶ جرّب الكود

flex: 1 يعني flex-grow: 1; flex-shrink: 1; flex-basis: 0% — "لينمو لملء المساحة المتبقية بالتساوي."

order

يُغيّر الترتيب البصري without التأثير على ترتيب DOM:

مثال

HTML

<style>
.container {
  display: flex;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #f39c12;
  padding: 10px;
  color: white;
}
.item:nth-child(2) { order: -1; } /* يتحرك للأمام */
</style>
<div class="container">
  <div class="item">الأول في DOM</div>
  <div class="item">الثاني في DOM (بصرياً الأول)</div>
  <div class="item">الثالث في DOM</div>
</div>

▶ جرّب الكود

ملاحظة: order يُغيّر فقط الترتيب البصري، وليس ترتيب DOM. قارئات الشاشة تتبع ترتيب DOM.

align-self

يتجاوز align-items الأصل لعناصر فردية:

مثال

HTML

<style>
.container {
  display: flex;
  align-items: center;
  height: 200px;
  background: #f5f5f5;
  gap: 10px;
  padding: 10px;
}
.item {
  background: #e74c3c;
  padding: 10px;
  color: white;
}
.item:nth-child(2) { align-self: flex-end; }
.item:nth-child(3) { align-self: flex-start; }
</style>
<div class="container">
  <div class="item">وسط (افتراضي)</div>
  <div class="item">أسفل (align-self)</div>
  <div class="item">أعلى (align-self)</div>
</div>

▶ جرّب الكود

❓ أسئلة شائعة

س ماذا يعني 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.