خصائص Flex Items في CSS - دليل المبتدئين للتحكم في العناصر المرنة

✨ مقدمة إلى Flex Items: عناصر التخطيط المرن

في الدرس السابق، تعلمنا كيفية إنشاء Flex Container والتحكم في اتجاه العناصر داخله. الآن، حان الوقت لنغوص في قلب هذا النظام: Flex Items (العناصر المرنة). هذه هي العناصر الفرعية المباشرة داخل الحاوية المرنة (Flex Container).

ببساطة، كل <div> أو <p> أو <img> داخل حاوية display: flex; يتحول تلقائياً إلى Flex Item. في هذا الدرس، سنتعلم الخصائص السحرية التي تتحكم في كل عنصر من هذه العناصر على حدة، مما يمنحك تحكماً دقيقاً في تخطيطك.

🧱 ما هي Flex Items؟

تخيل أن لديك صندوقاً (Flex Container) وبداخله عدة مكعبات (Flex Items). خصائص الحاوية تحدد كيف سيتم ترتيب هذه المكعبات كمجموعة (في صف أو عمود، وما إلى ذلك). أما خصائص Flex Items فهي التي تتحكم في كل مكعّب على حدة: حجمه، ترتيبه، وكيفية تمدده أو انكماشه بالنسبة لباقي المكعبات.

<!-- الحاوية المرنة (Flex Container) -->
<div class="container">
  <!-- هذه هي العناصر المرنة (Flex Items) -->
  <div class="item">عنصر 1</div>
  <div class="item">عنصر 2</div>
  <div class="item">عنصر 3</div>
</div>

.container {
  display: flex; /* هذا يحول الـ div إلى Flex Container */
  background-color: #f0f0f0;
  padding: 10px;
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
}
/* كل .item داخل .container هو الآن Flex Item */

🔄 خاصية order: تغيير الترتيب المرئي

افترض أن لديك ثلاثة عناصر مرقمة 1، 2، 3. تظهر بالترتيب الطبيعي كما في الكود HTML. خاصية order تسمح لك بتغيير هذا الترتيب المرئي دون تغيير الكود الأصلي! القيمة الافتراضية لكل عنصر هي 0.

.item:nth-child(1) { order: 3; } /* سيظهر العنصر الأول في النهاية */
.item:nth-child(2) { order: 1; } /* سيظهر العنصر الثاني في البداية */
.item:nth-child(3) { order: 2; } /* سيظهر العنصر الثالث في المنتصف */

النتيجة المرئية: سيكون الترتيب: العنصر 2، ثم العنصر 3، ثم العنصر 1.

📏 خاصية flex-grow: تحديد عامل النمو

تتحكم هذه الخاصية في القدرة النسبية للعنصر على النمو لملء المساحة الفارغة في الحاوية. القيمة الافتراضية هي 0، مما يعني "لا تنمو".

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

.container { width: 500px; } /* عرض الحاوية ثابت */

.item:nth-child(1) { flex-grow: 1; } /* ينمو بشكل طبيعي */
.item:nth-child(2) { flex-grow: 3; } /* ينمو بثلاثة أضعاف العنصر الأول */
.item:nth-child(3) { flex-grow: 1; } /* ينمو بشكل طبيعي */

هنا، إذا كان هناك 200px مساحة فارغة، سيأخذ العنصر الثاني 120px منها، بينما يأخذ العنصران الأول والثالث 40px لكل منهما.

🧻 خاصية flex-shrink: تحديد عامل الانكماش

عكس flex-grow. تتحكم في القدرة النسبية للعنصر على الانكماش عندما لا تتسع المساحة المتاحة لجميع العناصر. القيمة الافتراضية هي 1، مما يعني "يمكنك الانكماش".

• flex-shrink: 0 تعني "لا تنكمش أبداً"، وقد يسبب هذا تجاوز العنصر لحدود الحاوية.
• إذا كان عنصران بقيمة 1 وعنصر بقيمة 3، فإن العنصر ذو القيمة 3 سينكمش بثلاثة أضعاف سرعة الآخرين.

.container { width: 300px; } /* حاوية صغيرة */

.item {
  width: 150px; /* كل عنصر يبدأ بعرض 150px (المجموع 450px) */
}
.item:nth-child(2) {
  flex-shrink: 3; /* ينكمش أكثر بثلاث مرات من الآخرين */
}
/* لأن الحاوية 300px فقط، يجب انكماش 150px إجمالاً.
   العنصر الثاني سينكمش أكثر ليخفف الضغط */

📐 خاص ية flex-basis: تحديد الحجم الأساسي

تعرف هذه الخاصية الحجم الأولي أو الأساسي للعنصر قبل تطبيق أي نمو أو انكماش (flex-grow / flex-shrink). يمكن أن تكون قيمة مثل auto (الافتراضية)، أو 200px، أو 50%.

.item {
  flex-basis: 100px; /* يحاول كل عنصر أن يبدأ بحجم 100px */
}
/* ثم يتم تطبيق قواعد النمو والانكماش على المساحة المتبقية أو الناقصة */

🧩 الخاصية المختصرة flex

هذه خاصية مختصرة تجمع بين flex-grow و flex-shrink و flex-basis في سطر واحد. الصيغة هي: flex: <grow> <shrink> <basis>;.

.item {
  flex: 1; /* تعادل: flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}

.item-large {
  flex: 3 1 200px; /* grow=3, shrink=1, basis=200px */
}

.item-fixed {
  flex: 0 0 150px; /* لا ينمو ولا ينكمش، حجمه ثابت 150px */
}

🎯 خاصية align-self: محاذاة عنصر فردي

تذكر خاصية align-items التي تحدد محاذاة جميع العناصر عمودياً (في الصف)؟ خاصية align-self تسمح لك بتجاوز هذه المحاذاة لعنصر واحد محدد. قيمها: auto | flex-start | flex-end | center | baseline | stretch.

.container {
  display: flex;
  align-items: center; /* جميع العناصر في المنتصف */
  height: 200px;
}

.item:nth-child(2) {
  align-self: flex-start; /* هذا العنصر وحده يذهب للأعلى */
}

🧪 مثال عملي متكامل

لنطبق ما تعلمناه على مثال بسيط لشريط تحكم (Navigation Bar).

<nav class="navbar">
  <div class="logo">شعار</div>
  <a href="#" class="nav-item">الرئيسية</a>
  <a href="#" class="nav-item">منتجاتنا</a>
  <a href="#" class="nav-item">اتصل بنا</a>
  <div class="user-profile">👤</div>
</nav>

.navbar {
  display: flex;
  background-color: #333;
  padding: 10px;
}

.logo {
  flex: 0 0 auto; /* حجم ثابت، لا ينمو ولا ينكمش */
  color: white;
  font-weight: bold;
  margin-right: 20px;
}

.nav-item {
  flex: 1; /* كل رابط يأخذ حصة متساوية من المساحة المتاحة */
  color: #ccc;
  text-align: center;
  padding: 10px;
  text-decoration: none;
}

.user-profile {
  order: 99; /* نضعه في النهاية بغض النظر عن موقعه في الكود */
  margin-left: auto; /* حيلة لدفعه إلى أقصى اليمين */
  color: white;
}

🎓 ختام الدرس

تهانينا! 🥳 لقد أتقنت الآن أدوات التحكم الفردية في عالم Flexbox. تعلمت كيف تغير ترتيب العناصر بـ order، تتحكم في نموها وانكماشها بـ flex-grow و flex-shrink، تحدد حجمها الأساسي بـ flex-basis، وتعدل محاذاة عنصر واحد بـ align-self. تذكر أن الممارسة هي مفتاح الإتقان.