إتقان Flexbox في CSS

Flexbox (Flexible Box Layout) هو نموذج تخطيط في CSS يتيح تصميم بنى مرنة ومتجاوبة دون الحاجة إلى استخدام float أو التموضع (positioning). وهو أداة قوية لمحاذاة العناصر داخل الحاوية وتوزيع المساحة بينها.

المفاهيم الأساسية

يعمل Flexbox مع نوعين من العناصر:

• الحاوية المرنة (flex container، العنصر الأب)
• العناصر المرنة (flex items، العناصر الأبناء)

إنشاء حاوية مرنة

لإنشاء حاوية مرنة، استخدم الخاصية display مع القيمة flex أو inline-flex:

.container {
  display: flex; /* أو inline-flex */
}

خصائص الحاوية المرنة

اتجاه العناصر

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row (الافتراضي): من اليسار إلى اليمين
• row-reverse: من اليمين إلى اليسار
• column: من الأعلى إلى الأسفل
• column-reverse: من الأسفل إلى الأعلى

الالتفاف إلى سطر جديد

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (الافتراضي): جميع العناصر في سطر واحد
• wrap: تنتقل العناصر إلى السطر التالي عند الحاجة
• wrap-reverse: تنتقل العناصر إلى السطر السابق عند الحاجة

الاختصار flex-flow

.container {
  flex-flow: row nowrap; /* دمج flex-direction وflex-wrap */
}

المحاذاة الأفقية (justify-content)

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start (الافتراضي): محاذاة العناصر إلى البداية
• flex-end: محاذاة العناصر إلى النهاية
• center: توسيط العناصر
• space-between: مسافة متساوية بين العناصر
• space-around: مسافة متساوية حول العناصر
• space-evenly: مسافة متساوية بين العناصر وحولها

المحاذاة العمودية (align-items)

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

• stretch (الافتراضي): تمديد العناصر لملء الحاوية
• flex-start: محاذاة العناصر إلى الأعلى
• flex-end: محاذاة العناصر إلى الأسفل
• center: توسيط العناصر عموديًا
• baseline: محاذاة العناصر على خط الأساس

محاذاة الأسطر (align-content)

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

لا يكون لهذه الخاصية أي تأثير إلا عندما يوجد عدة أسطر من العناصر.

خصائص العناصر المرنة

الترتيب

.item {
  order: 0; /* الافتراضي */
}

كلما زادت القيمة، تأخر ظهور العنصر في الترتيب.

المرونة (flex-grow وflex-shrink وflex-basis)

.item {
  flex-grow: 0; /* الافتراضي */
  flex-shrink: 1; /* الافتراضي */
  flex-basis: auto; /* الافتراضي */
}

• flex-grow: قدرة العنصر على النمو
• flex-shrink: قدرة العنصر على الانكماش
• flex-basis: الحجم الافتراضي للعنصر

الاختصار flex

.item {
  flex: 0 1 auto; /* دمج flex-grow وflex-shrink وflex-basis */
}

المحاذاة الفردية

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

تتيح هذه الخاصية تجاوز المحاذاة المحددة بواسطة align-items لعنصر معيّن.

مثال عملي

إليك مثالًا على تخطيط باستخدام Flexbox:

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

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

حالات الاستخدام الشائعة

1. التوسيط المثالي (أفقيًا وعموديًا):

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. تنقل متجاوب:

nav {
  display: flex;
  flex-wrap: wrap;
}

nav a {
  flex: 1 1 100px;
}

3. شبكة مرنة:

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

.grid-item {
  flex: 1 1 300px;
  margin: 10px;
}

الخلاصة

Flexbox أداة قوية لإنشاء تخطيطات مرنة ومتجاوبة. فهو يبسّط إلى حد كبير كثيرًا من تحديات التخطيط التي كان حلها صعبًا بالطرق التقليدية مثل float والتموضع.

لتعميق معرفتك بـ Flexbox، أنصحك باستكشاف الدليل الشامل على MDN والتدرب باستخدام أدوات تفاعلية مثل Flexbox Froggy.