Flexbox في CSS
مكونات الصفحة رسمت هياكل وأشرطة وقوائم ومعارض. Flexbox هو الأسلوب الحديث لصفّ العناصر في اتجاه واحد — صف أو عمود — بأقل عناء مع float. فعّل display: flex، تعرّف على flex items، ثم تعمّق في دروس Flexbox التالية.
مجموعة أدوات بدء Flexbox
📊 Flexbox بنظرة سريعة
| الفكرة | المهمة اليومية |
|---|---|
| حاوية Flex | الأب مع display: flex (أو inline-flex) |
| عناصر Flex | الأبناء المباشرون المشاركون في تخطيط flex |
| المحور الرئيسي | الاتجاه الأساسي لسير العناصر (صف افتراضيًا) |
| المحور المتقاطع | الاتجاه العمودي للمحاذاة |
gap |
مسافة مدمجة بين العناصر |
| الدروس التالية | خصائص الحاوية، خصائص العنصر، أنماط flex المتجاوبة |
قوة Flexbox في بُعد واحد. لشبكات الصفحة ثنائية الأبعاد الكاملة يأتي موديول Grid بعد مسار Flexbox هذا.
فعّل حاوية flex
ضع display: flex على الأب. يصبح الأبناء flex items ويجلسون في صف افتراضيًا.
.toolbar {
display: flex;
align-items: center;
}
.toolbar .btn {
padding: 0.5rem 0.75rem;
}
gap بدل معارك margin
gap يباعد العناصر دون حيل الانهيار. فضّله للفراغات المتساوية بين أبناء flex.
.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}
ادفع العناصر بعيدًا على المحور الرئيسي
justify-content يوزّع المساحة الحرة على المحور الرئيسي. space-between نمط ترويسة كلاسيكي: العلامة يسارًا والإجراءات يمينًا.
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
وسّط على المحور المتقاطع — وعلى الاثنين
align-items: center يصفّ العناصر على المحور المتقاطع. اقرنه بـ justify لتجمّع هادئ في وسط صندوق.
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
}
التفّ عندما ينفد مكان الصف
flex-wrap: wrap يسمح للعناصر بالهبوط إلى السطر التالي — سبق أن لمحتَ ذلك في المعرض. درس Flex Responsive سيذهب أبعد.
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
عادة Flexbox هادئة
استخدم Flexbox للصفوف والأعمدة أحادية البعد: تنقّل، أشرطة أدوات، صفوف بطاقات، توسيط. تعلّم تفاصيل الحاوية تاليًا، ثم نمو/انكماش العنصر، ثم flex المتجاوب. لا تتوقع أن يحل Flexbox وحده محل كل تخطيط Grid.
.cluster {
display: flex;
gap: 0.75rem;
align-items: center;
}
.cluster__main { /* grows later with flex item props */ }
.cluster__meta { /* stays compact */ }
جرّب بنفسك
- اصنع
.toolbarبـdisplay: flexوثلاثة أزرار. - أضف
gapوalign-items: center. - ابنِ ترويسة بـ
justify-content: space-between. - وسّط زوج أزرار داخل صندوق بـ justify + align.
- اكتب أي درس قادم يغطي أفكار
flex-grow/flex-basis.
أخطاء شائعة
- رشّ
display: flexعلى كل غلاف بلا هدف تخطيط - توقع أن يتصرّف Flexbox كـ Grid ثنائي الأبعاد كامل
- محاربة المسافات بـ margin عشوائي بدل
gap - تخطّي الدروس التالية وحفظ هذه المقدمة فقط
- البقاء على صفوف float إلى الأبد بينما صف flex أوضح
ملخص
- Flexbox يرتّب العناصر على محور رئيسي واحد
display: flexينشئ حاوية؛ الأبناء هم flex itemsgapوjustify-contentوalign-itemsتفتح الصفوف اليومية- الـ wrap لمحة لصفوف متجاوبة؛ المزيد لاحقًا
- دروس الحاوية والعنصر وflex المتجاوب تعمّق النموذج تاليًا
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى