ورقة غش تخطيط CSS Flexbox
يوفر نموذج تخطيط Flexbox (الصندوق المرن) طريقة أكثر كفاءة لمحاذاة وتوزيع العناصر داخل الحاوية، حتى عندما يكون حجمها غير معروف أو ديناميكياً.
خصائص الحاوية (Flex Container)
Set on parent: display: flex; or display: inline-flex;
| الخاصية | الوصف | القيم الشائعة |
|---|---|---|
flex-direction |
اتجاه المحور الرئيسي | row, row-reverse, column, column-reverse |
flex-wrap |
ما إذا كان سيتم الالتفاف | nowrap, wrap, wrap-reverse |
flex-flow |
اختصار للاتجاه والالتفاف | row wrap |
justify-content |
طريقة المحاذاة على المحور الرئيسي | flex-start, flex-end, center, space-between, space-around |
align-items |
طريقة المحاذاة على المحور المتقاطع | flex-start, flex-end, center, baseline, stretch |
align-content |
محاذاة الأسطر المتعددة على المحور المتقاطع | flex-start, flex-end, center, space-between, stretch |
خصائص العناصر (Flex Items)
Set on children:
| الخاصية | الوصف | الافتراضي |
|---|---|---|
order |
ترتيب العرض (القيم الأصغر تظهر أولاً) | 0 |
flex-grow |
نسبة التكبير (عند توفر المساحة) | 0 |
flex-shrink |
نسبة التصغير (عند ضيق المساحة) | 1 |
flex-basis |
الحجم الأساسي قبل توزيع المساحة | auto |
flex |
اختصار لـ grow و shrink و basis | 0 1 auto |
align-self |
يسمح للعنصر الواحد بمحاذاة مختلفة | auto |
المفاهيم الأساسية
- المحور الرئيسي (Main Axis): أفقي افتراضياً، يحدده flex-direction.
- المحور المتقاطع (Cross Axis): الاتجاه المتعامد مع المحور الرئيسي.
أمثلة سيناريو
التوسيط الأفقي والرأسي
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}توزيع متساوي العرض
.item {
flex: 1; /* شغل المساحة المتبقية بالتساوي */
}محاذاة الأطراف (Space Between)
.navbar {
display: flex;
justify-content: space-between;
}