CSS - Flexbox الصندوق المرن

CSS - Flexbox (الصندوق المرن)

🔸 Flexbox هو نموذج تخطيط قوي في CSS يسمح لك بمحاذاة العناصر وتوزيع المساحات بينها بطريقة مرنة وسهلة، خاصة عندما تكون الأحجام غير معروفة أو تتغير ديناميكيًا.

---

🔹 الخطوة الأولى: تحديد العنصر الحاوي كـ flex container

.container {
  display: flex;
}

📌 بعد تفعيل display: flex على العنصر الأب، يتم توزيع كل العناصر بداخله بشكل أفقي بشكل افتراضي.

---

🔹 الخصائص الخاصة بالعنصر الحاوي (Container)

• flex-direction: اتجاه العناصر (row, column, row-reverse, column-reverse)
• justify-content: المحاذاة الأفقية (start, center, space-between...)
• align-items: المحاذاة الرأسية (stretch, center, flex-start...)
• flex-wrap: هل يتم لف العناصر أم لا
• align-content: محاذاة الصفوف عند وجود أكثر من صف

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

---

🔹 الخصائص الخاصة بالعناصر الأبناء (Items)

• flex-grow: نسبة النمو عند توفر مساحة إضافية.
• flex-shrink: نسبة الانكماش عند ضيق المساحة.
• flex-basis: الحجم الابتدائي للعنصر.
• flex: اختصار للثلاثة أعلاه (grow shrink basis).
• align-self: محاذاة عنصر معين بشكل مختلف عن البقية.
• order: ترتيب العناصر (الأصغر يظهر أولًا).

.item {
  flex: 1;
  order: 2;
  align-self: flex-start;
}

---

🧪 مثال عملي على Flexbox

<style>
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  background: #eee;
}
.box {
  width: 100px;
  height: 100px;
  background: tomato;
  color: white;
  text-align: center;
  line-height: 100px;
}
</style>

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

---

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

• Flexbox ممتاز في توزيع المساحات في الاتجاه الواحد (أفقي أو عمودي).
• إذا كنت تريد تصميم أعمدة وصفوف في نفس الوقت، استخدم CSS Grid.
• جميع المتصفحات الحديثة تدعم Flexbox بالكامل.