CSS - Flexbox Flex Items خصائص العناصر داخل

CSS - خصائص العناصر داخل Flexbox (Flex Items)

🔸 عند وضع عناصر داخل حاوية Flex (أي عنصر عليه display: flex)، يمكنك التحكم في سلوك كل عنصر على حدة باستخدام مجموعة من الخصائص المخصصة للعناصر الأبناء.

---

🔹 1. order

🔹 تُستخدم لتحديد ترتيب ظهور العنصر داخل الحاوية. كلما كانت القيمة أقل، يظهر العنصر قبل غيره.

.item1 {
  order: 2;
}

.item2 {
  order: 1;
}

---

🔹 2. flex-grow

🔹 يُحدد مدى قدرة العنصر على التمدد لملء المساحة المتاحة في الحاوية.

.item {
  flex-grow: 1;
}

📌 إذا كانت كل العناصر flex-grow: 1، فستتقاسم المساحة بالتساوي. إذا كانت واحدة 1 وأخرى 2، فالثانية تأخذ ضعف المساحة.

---

🔹 3. flex-shrink

🔹 يُحدد ما إذا كان العنصر سينكمش عند ضيق الشاشة، وكم سينكمش مقارنة بغيره.

.item {
  flex-shrink: 1;
}

📌 القيمة الافتراضية 1، وتعني أن العنصر يمكنه الانكماش. إذا وضعت 0 فلن ينكمش أبدًا.

---

🔹 4. flex-basis

🔹 تُحدد الحجم الابتدائي للعنصر قبل توزيع المساحة المتاحة.

.item {
  flex-basis: 200px;
}

📌 تشبه width، لكن تُستخدم داخل Flex لتكون مرجع التمدد أو الانكماش.

---

🔹 5. flex (اختصار)

🔹 اختصار للخصائص الثلاثة: flex-grow و flex-shrink و flex-basis.

.item {
  flex: 1 0 200px; /* grow shrink basis */
}

📌 الشائع استخدامه: flex: 1; (أي يتمدد بالتساوي).

---

🔹 6. align-self

🔹 تُستخدم لمحاذاة عنصر واحد بشكل مختلف عن بقية العناصر في نفس الحاوية.

.item {
  align-self: flex-end;
}

📌 القيم الممكنة: auto, flex-start, flex-end, center, baseline, stretch

---

📌 ملاحظات هامة

• جميع هذه الخصائص تعمل فقط إذا كان العنصر داخل حاوية Flex.
• flex-grow و flex-shrink يعتمد تأثيرهما على المساحة المتاحة.
• للتصميمات المتقدمة، استخدم هذه الخصائص مع media queries.