CSS - Flexbox التصميم المتجاوب باستخدام

CSS - التصميم المتجاوب باستخدام Flexbox

🔸 باستخدام Flexbox، من السهل إنشاء تخطيطات مرنة تتكيف تلقائيًا مع حجم الشاشة، خاصة عند دمجه مع خاصية flex-wrap وMedia Queries.

---

🔹 حاوية Flex قابلة للالتفاف

يمكنك جعل العناصر تلتف تلقائيًا باستخدام flex-wrap: wrap;

.row {
  display: flex;
  flex-wrap: wrap;
}

---

🔹 تقسيم الأعمدة المتجاوبة

باستخدام Flexbox وpercentages يمكنك تحديد عرض الأعمدة بشكل مرن.

.column {
  flex: 50%;
  padding: 10px;
}

📌 هذا يجعل كل عمود يأخذ نصف عرض الحاوية. وعند الالتفاف (wrap)، يتم توزيعهم عموديًا تلقائيًا.

---

🧪 مثال عملي كامل على تخطيط متجاوب

<style>
.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 50%;
  padding: 10px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
  }
}
</style>

<div class="row">
  <div class="column">عمود 1</div>
  <div class="column">عمود 2</div>
</div>

📌 في الشاشات الكبيرة: عمودان بجانب بعض بنسبة 50%. 📱 في الشاشات الصغيرة (أقل من 600px): كل عمود يأخذ 100% ويظهر تحت الآخر.

---

📌 نصائح هامة

• استخدم box-sizing: border-box لضمان عدم تجاوز الحشو العرض المحدد.
• يفضل استخدام media queries لتخصيص العرض حسب حجم الشاشة.
• Flexbox يجعل التوزيع والالتفاف أسهل كثيرًا من float.