🌟 المقدمة التحفيزية :
“هل حاولت يوماً وضع زرين بجانب بعضهما ووجدت أحدهما يهرب للأسفل؟ لا تقلق ، لست وحدك! اليوم سنمتلك القوة الخارقة للمبرمجين وهي Flexbox. سأعلمك كيف تأمر العناصر بأن تصطف بجانب بعضها، أو تبتعد عن بعضها بانتظام، بكلمة برمجية واحدة فقط !”

💡 المفهوم :
تخيل أن الموقع هو “غرفة” وأنت تريد ترتيب الأثاث فيها بضغطة زر . display: flex ; هي هذه الضغطة .

💻 كود التحدي :

.container {
    display: flex;
    justify-content: space-around; /* توزيع الأزرار بمسافات متساوية */
    align-items: center;           /* جعل الأزرار في منتصف الارتفاع */
}

🤔 ما هو Flexbox ؟  Flexbox هو نظام في CSS كيستعمل لتنظيم العناصر داخل حاوية (Container) .

ببساطة :  عندنا أب (Container)  ،  وعندنا أبناء (Items)  .

كنعطي للأب :

display: flex;

✨  وهنا كيبدأ السحر

🟢 1️⃣ مثال بسيط : ترتيب العناصر أفقياً  

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
.container{
  display: flex;
}

.box{
  background: steelblue;
  color: white;
  padding: 30px;
  margin: 5px;
}

📌 النتيجة : العناصر غادي يجيو حدّ حدّ (في سطر واحد) .

🟢 2️⃣ التوسيط السحري (أشهر استعمال)
أشهر سؤال في CSS :  كيف نوسّط عنصر في الوسط؟

👑  Flexbox جا بالحل .

 

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

✔ justify-content → أفقي
✔ align-items → عمودي

دابا أي عنصر داخل container غادي يكون في الوسط تماماً .

🟢 3️⃣ توزيع المسافات باحتراف
🎯 Space Between 

.container{
  display: flex;
  justify-content: space-between;
}

العناصر كيتوزعو من الأول للآخر .

🎯 Space Around 

justify-content: space-around;

كيعطي مسافة متساوية حول كل عنصر .

🟢 4️⃣ الاتجاه العمودي
افتراضياً Flex كيخدم أفقياً .
إلى بغيتي عمودي :

.container{
  display: flex;
  flex-direction: column;
}

🧠 أهم الخصائص اللي خاصك تحفظ

الخاصية الدور
display:flex تفعيل Flexbox
justify-content توزيع أفقي
align-items توزيع عمودي
flex-direction تحديد الاتجاه
gap مسافة بين العناصر

مثال  :

.container{
  display:flex;
  gap:10px;
}

💡 خلاصة اليوم
Flexbox =
تنظيم سهل

توسيط احترافي

توزيع ذكي
= تصميم عصري

PreviousNext