تعلم CSS Flexbox - دليل شامل للتحكم في تخطيط الصفحات

🎯 ما هو Flex Container وكيف يغير طريقة تصميمك؟

مرحباً بك في عالم التخطيط المرن! إذا كنت قد عانيت من قبل من محاولة ترتيب العناصر في صفحة ويب باستخدام خواص مثل float أو position، فاستعد لتجربة أسهل بكثير. Flex Container هو حاوية (عنصر أب) ننشئها لتتحكم في تخطيط العناصر الفرعية داخلها بطريقة مرنة ومتجاوبة.

فكر فيه كصندوق ذكي يضع العناصر بداخله بطريقة منظمة، حيث يمكنك التحكم بسهولة في اتجاهها، محاذاتها، وتوزيع المسافات بينها.

🔧 الخطوة الأولى: إنشاء حاوية مرنة (Flex Container)

لكي تتحول أي عنصر HTML عادي إلى حاوية مرنة، كل ما تحتاجه هو سطر CSS واحد!

.container {
  display: flex;
}

<!-- هذا العنصر <div> سيصبح حاوية مرنة -->
<div class="container">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

الشرح: الخاصية display: flex; هي التي تعطي العنصر "القوة المرنة". بمجرد تطبيقها، يصبح العنصر حاوية (Flex Container)، وتصبح جميع العناصر المباشرة بداخله تلقائياً عناصر مرنة (Flex Items).

📏 فهم المحاور: المحور الرئيسي والمحور الجانبي

لفهم Flexbox بشكل صحيح، يجب أن تفهم فكرة المحورين:

1. المحور الرئيسي (Main Axis): هو المحور الذي يتم فيه ترتيب العناصر بشكل أساسي. اتجاهه الافتراضي هو أفقي (من اليسار إلى اليمين).
2. المحور الجانبي (Cross Axis): هو المحور العمودي على المحور الرئيسي. اتجاهه الافتراضي هو عمودي (من الأعلى إلى الأسفل).

الجميل في Flexbox أنك تستطيع تغيير اتجاه المحور الرئيسي، مما يعني أن المحور الجانبي سيدور تلقائياً ليكون عمودياً عليه.

🧭 التحكم في اتجاه العناصر بـ flex-direction

الخاصية flex-direction تتحكم في اتجاه المحور الرئيسي، وبالتالي كيفية ترتيب العناصر الفرعية داخل الحاوية.

.container {
  display: flex;
  flex-direction: row; /* القيمة الافتراضية (من اليسار لليمين) */
}

قيم flex-direction الأساسية:

• row (افتراضي): يرتب العناصر في صف أفقي من اليسار إلى اليمين.
• row-reverse: يرتب العناصر في صف أفقي ولكن من اليمين إلى اليسار (يعكس الترتيب).
• column: يرتب العناصر في عمود رأسي من الأعلى إلى الأسفل.
• column-reverse: يرتب العناصر في عمود رأسي من الأسفل إلى الأعلى.

.container-vertical {
  display: flex;
  flex-direction: column; /* العناصر ستترتب عمودياً */
}

↔️ محاذاة العناصر على المحور الرئيسي بـ justify-content

تتحكم خاصية justify-content في كيفية توزيع المساحة الفارغة على طول المحور الرئيسي بين العناصر الفرعية وحولها. هذه الخاصية قوية جداً لإنشاء مسافات متساوية أو محاذاة مركزية.

.container {
  display: flex;
  justify-content: flex-start; /* القيمة الافتراضية (المحاذاة لبداية المحور) */
}

أهم قيم justify-content:

• flex-start: تجمع العناصر عند بداية المحور الرئيسي.
• flex-end: تجمع العناصر عند نهاية المحور الرئيسي.
• center: تضع العناصر في منتصف المحور الرئيسي.
• space-between: توزع العناصر بالتساوي على المحور، حيث يلتصق العنصر الأول بالبداية والعنصر الأخير بالنهاية.
• space-around: توزع العناصر بالتساوي مع وجود مسافة متساوية حول كل عنصر.

.container-centered {
  display: flex;
  justify-content: center; /* ستركز جميع العناصر في المنتصف */
}

↕️ محاذاة العناصر على المحور الجانبي بـ align-items

بينما يهتم justify-content بالمحور الرئيسي، فإن align-items تتحكم في محاذاة العناصر على طول المحور الجانبي داخل الحاوية.

.container {
  display: flex;
  align-items: stretch; /* القيمة الافتراضية (تمدد العناصر لملء ارتفاع الحاوية) */
}

أهم قيم align-items:

• stretch: (الافتراضي) تمدد العناصر لتملء ارتفاع الحاوية بالكامل.
• flex-start: تضع العناصر عند بداية المحور الجانبي (أعلى الحاوية إذا كان الاتجاه row).
• flex-end: تضع العناصر عند نهاية المحور الجانبي (أسفل الحاوية إذا كان الاتجاه row).
• center: تضع العناصر في منتصف المحور الجانبي (توسيط عمودي رائع!).

.container-vertical-center {
  display: flex;
  align-items: center; /* توسيط العناصر عمودياً داخل الحاوية */
  height: 200px; /* يجب تحديد ارتفاع للحاوية لملاحظة التأثير */
}

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

لنطبق ما تعلمناه في مثال بسيط. لنفترض أننا نريد إنشاء شريط تنقل (Navbar).

<nav class="navbar">
  <div>الرئيسية</div>
  <div>من نحن</div>
  <div>الخدمات</div>
  <div>اتصل بنا</div>
</nav>

.navbar {
  display: flex; /* نجعل العنصر <nav> حاوية مرنة */
  justify-content: space-around; /* نوزع عناصر القائمة بالتساوي */
  align-items: center; /* نوسطها عمودياً */
  background-color: #333;
  color: white;
  height: 60px;
}
.navbar div {
  padding: 10px;
}

النتيجة: حصلنا على شريط تنقل جميل، عناصره موزعة بالتساوي ومحاذاة للوسط عمودياً.