HTML & CSS • المستوى الثالث • الدرس 2
العودة لفهرس المستوىمحاذاة العناصر وتوزيع المسافات بـ Flexbox
أهداف الدرس العلمية
- توزيع المسافات بين العناصر على المحور الرئيسي بـ
justify-content. - محاذاة العناصر عمودياً على المحور الفرعي باستخدام
align-items. - تحديد الفجوات والمسافات الفاصلة بين الأبناء بـ
gapبدلاً من Margin. - توسيط العناصر بدقة متناهية في منتصف الحاوية تماماً أفقياً وعمودياً.
1. التوزيع على المحور الرئيسي (justify-content)
تتحكم الخاصية justify-content بصف العناصر وتوزيع المسافات بينها أفقياً (إذا كان الاتجاه Row):
justify-content: center;رصف وتوسيط جميع العناصر في منتصف الحاوية أفقياً.
justify-content: space-between;توزيع العناصر بحيث يدفع العنصر الأول والأخير للأطراف وتتوزع الفراغات بالتساوي بين البقية.
justify-content: space-around;إضافة مسافات متساوية حول كل عنصر على حدة.
2. المحاذاة العمودية والفجوات (align-items & gap)
لضبط وضعية العناصر عمودياً وإضافة مسافات فاصلة بينها:
align-items: center;
محاذاة كافة العناصر في المنتصف عمودياً بالنسبة لارتفاع الحاوية.
gap: 20px;
تحديد الفجوة والمسافة الفاصلة بين عناصر Flex المجاورة بأسلوب عصري ومنظم.
مثال التوسيط الكامل والتوزيع:
css
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
} التطبيق العملي المباشر
تحدي الدرس الثاني: توزيع المحتوى بـ Gap و Align-Items
قم بكتابة قواعد CSS داخل الصنف .flex-container لتطبيق الشروط التالية:
- توسيط العناصر أفقياً في منتصف الصندوق بإضافة:
justify-content: center;. - محاذاة العناصر عمودياً في منتصف الارتفاع بواسطة:
align-items: center;. - إضافة فجوة مسافة بين بطاقات المحتوى بمقدار:
gap: 20px;.
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 41, Col 1UTF-8Spaces: 2
778 chars