خصائص عناصر Flexbox

مقدمة في خصائص عناصر Flex

في الدروس السابقة، تعلمت عن خصائص حاوية flex مثل display: flex وflex-direction وjustify-content وalign-items. تلك الخصائص تتحكم في الحاوية وتؤثر على جميع العناصر الابناء كمجموعة. لكن Flexbox يمنحك ايضا خصائص قوية تطبقها مباشرة على عناصر flex الفردية، مما يتيح لك التحكم في كيفية نمو كل عنصر ابن وانكماشه وتعيين حجمه الابتدائي واعادة ترتيبه ومحاذاته بشكل مستقل داخل الحاوية. اتقان هذه الخصائص على مستوى العنصر هو المفتاح لاطلاق القوة الكاملة لـ Flexbox وبناء تخطيطات مرنة ومتجاوبة حقا.

في هذا الدرس، سنغطي كل خاصية من خصائص عنصر flex بعمق: flex-grow وflex-shrink وflex-basis والاختصار flex وorder وalign-self. سنمشي ايضا عبر خوارزمية تحجيم flex خطوة بخطوة، ونستكشف المشاكل الشائعة مثل مشكلة الطفح min-width: 0، ونتعلم حيلة margin: auto، ونبني تخطيطات عملية تشمل تخطيط الكأس المقدسة والتذييل اللاصق وكائنات الوسائط.

flex-grow: النمو التناسبي

خاصية flex-grow تحدد مقدار ما يجب ان ينمو عنصر flex مقارنة بعناصر flex الاخرى عندما يكون هناك مساحة اضافية متاحة في الحاوية. القيمة الافتراضية هي 0، مما يعني ان العناصر لن تنمو خارج حجم محتواها الطبيعي. عندما تعين flex-grow على رقم موجب، سيمتص العنصر حصة تناسبية من المساحة المتبقية.

.container {
    display: flex;
    width: 600px;
}

.item-a {
    flex-grow: 1;  /* يحصل على حصة واحدة من المساحة الاضافية */
    width: 100px;
}

.item-b {
    flex-grow: 2;  /* يحصل على حصتين من المساحة الاضافية */
    width: 100px;
}

.item-c {
    flex-grow: 1;  /* يحصل على حصة واحدة من المساحة الاضافية */
    width: 100px;
}

لنقم بالحساب. الحاوية عرضها 600 بكسل. العناصر الثلاثة لديها عرض طبيعي مجمع يبلغ 300 بكسل (100 بكسل لكل عنصر). هذا يترك 300 بكسل من المساحة الاضافية. اجمالي عامل النمو هو 1 + 2 + 1 = 4. العنصر A يحصل على 300 بكسل * (1/4) = 75 بكسل اضافية، ليصبح 175 بكسل. العنصر B يحصل على 300 بكسل * (2/4) = 150 بكسل اضافية، ليصبح 250 بكسل. العنصر C يحصل على 300 بكسل * (1/4) = 75 بكسل اضافية، ليصبح 175 بكسل. المجموع هو 175 + 250 + 175 = 600 بكسل، مما يملأ الحاوية تماما.

.container {
    display: flex;
}

/* جميع العناصر تتشارك المساحة الاضافية بالتساوي */
.item {
    flex-grow: 1;
}

/* اعطاء عنصر واحد مساحة اكثر من الاخرين */
.item-featured {
    flex-grow: 3;
}

flex-shrink: التحكم في الانكماش

خاصية flex-shrink تحدد مقدار ما يجب ان ينكمش عنصر flex مقارنة بعناصر flex الاخرى عندما لا توجد مساحة كافية في الحاوية. القيمة الافتراضية هي 1، مما يعني ان جميع عناصر flex ستنكمش بالتساوي لمنع الطفح. تعيين flex-shrink: 0 يمنع العنصر من الانكماش نهائيا، وهو مفيد للعناصر مثل الاشرطة الجانبية او الايقونات التي يجب ان تحافظ على حجم ثابت.

.container {
    display: flex;
    width: 500px;
}

.sidebar {
    flex-shrink: 0;  /* لن ينكمش -- يبقى عند 200 بكسل */
    width: 200px;
}

.content {
    flex-shrink: 1;  /* سينكمش اذا لزم الامر */
    width: 400px;
}

في هذا المثال، العرض الطبيعي المجمع للعناصر هو 600 بكسل، لكن الحاوية فقط 500 بكسل. هناك عجز 100 بكسل. لان الشريط الجانبي لديه flex-shrink: 0، فانه يرفض الانكماش. منطقة المحتوى تمتص كامل العجز البالغ 100 بكسل، منكمشة من 400 بكسل الى 300 بكسل. هذا النمط شائع جدا للتخطيطات التي يجب فيها ان يحافظ الشريط الجانبي على عرض ادنى.

.container {
    display: flex;
    width: 400px;
}

.item-a {
    flex-shrink: 1;
    width: 200px;
}

.item-b {
    flex-shrink: 3;
    width: 200px;
}

/* العجز: 400 بكسل مطلوبة، 400 بكسل متاحة = 0... لكن اذا كانت الحاوية 300 بكسل:
   العجز = 100 بكسل
   اجمالي عامل الانكماش = 1*200 + 3*200 = 800
   العنصر A ينكمش: 100 * (1*200/800) = 25 بكسل -> يصبح 175 بكسل
   العنصر B ينكمش: 100 * (3*200/800) = 75 بكسل -> يصبح 125 بكسل */

flex-basis: الحجم الابتدائي

خاصية flex-basis تعين الحجم الرئيسي الابتدائي لعنصر flex قبل تطبيق اي نمو او انكماش. تحدد نقطة البداية التي يضيف منها flex-grow مساحة او يزيل منها flex-shrink مساحة. القيمة الافتراضية هي auto، مما يعني ان العنصر يستخدم width (او height في تخطيط العمود) كاساس. اذا لم يتم تعيين عرض والاساس هو auto، يتحجم العنصر حسب محتواه.

/* استخدام flex-basis (المفضل في تخطيطات flex) */
.item {
    flex-basis: 200px;
}

/* استخدام width (يعمل لكن flex-basis له الاولوية) */
.item {
    width: 200px;
}

/* flex-basis يتغلب على width في حاويات flex */
.item {
    width: 300px;
    flex-basis: 200px;  /* هذا يفوز -- العنصر يبدأ عند 200 بكسل */
}

/* auto تعني "انظر الى خاصية width الخاصة بي" */
.item {
    width: 300px;
    flex-basis: auto;  /* يستخدم 300 بكسل من width */
}

/* content تعني "تحجم حسب محتواي" (بغض النظر عن width) */
.item {
    width: 300px;
    flex-basis: content;  /* يتجاهل 300 بكسل، يتحجم حسب المحتوى */
}

flex-basis: 0 مقابل flex-basis: auto

الفرق بين flex-basis: 0 وflex-basis: auto حاسم وغالبا ما يُساء فهمه. مع flex-basis: auto، يبدأ العنصر بحجم محتواه الطبيعي (او العرض الصريح)، ثم يوزع flex-grow المساحة المتبقية. مع flex-basis: 0، يبدأ العنصر بعرض صفر، ويوزع flex-grow كل مساحة الحاوية تناسبيا. هذا يعني ان flex-grow: 1 مع flex-basis: 0 يعطيك عناصر متساوية العرض حقا، بينما flex-grow: 1 مع flex-basis: auto يعطيك عناصر تختلف حسب حجم محتواها.

/* عناصر بمحتوى مختلف لكن عروض متساوية */
.equal-items {
    display: flex;
}
.equal-items .item {
    flex-grow: 1;
    flex-basis: 0;
    /* جميع العناصر ستكون بنفس العرض تماما بغض النظر عن المحتوى */
}

/* عناصر تتشارك المساحة الاضافية لكن تبدأ من حجم المحتوى */
.auto-items {
    display: flex;
}
.auto-items .item {
    flex-grow: 1;
    flex-basis: auto;
    /* العناصر ذات المحتوى الاكثر ستكون اعرض */
}

خاصية flex المختصرة

الاختصار flex يجمع flex-grow وflex-shrink وflex-basis في تصريح واحد. استخدام الاختصار موصى به بشدة لانه يعين قيما افتراضية معقولة تختلف عن القيم الافتراضية للخصائص الفردية. الصيغة هي: flex: <grow> <shrink> <basis>.

/* flex: grow shrink basis */
.item {
    flex: 1 1 200px;
    /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}

/* انماط الاختصار الشائعة */
.item { flex: 1; }
/* يساوي: flex: 1 1 0% */
/* العنصر ينمو وينكمش بالتساوي، يبدأ من عرض صفر */

.item { flex: auto; }
/* يساوي: flex: 1 1 auto */
/* العنصر ينمو وينكمش، يبدأ من حجم المحتوى/العرض */

.item { flex: none; }
/* يساوي: flex: 0 0 auto */
/* العنصر لا ينمو ولا ينكمش -- جامد تماما */

.item { flex: 0 auto; }
/* يساوي: flex: 0 1 auto (نفس القيمة الابتدائية) */
/* العنصر لا ينمو، يمكنه الانكماش، يبدأ من حجم المحتوى */

/* عنصر بحجم ثابت لا يتمدد */
.item { flex: 0 0 250px; }
/* لا ينمو، لا ينكمش، دائما 250 بكسل */

/* صيغة القيمتين */
.item { flex: 2 0; }
/* flex-grow: 2, flex-shrink: 0, flex-basis: 0% */

.item { flex: 1 200px; }
/* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */

اي قيمة flex يجب ان تستخدم؟

• flex: 1 -- استخدمها عندما تريد ان تملأ العناصر الحاوية بالتساوي. الافضل للاعمدة متساوية العرض وعناصر التنقل او اي حالة يجب فيها ان تتشارك العناصر كل المساحة المتاحة تناسبيا.
• flex: auto -- استخدمها عندما تريد ان تنمو العناصر وتنكمش لكن تبدأ من حجم محتواها الطبيعي. جيدة لاشرطة التنقل حيث يكون لكل نص رابط طول مختلف.
• flex: none -- استخدمها للعناصر التي يجب ان تبقى بحجم ثابت. مثالية للايقونات والشعارات والصور الرمزية والاشرطة الجانبية ثابتة العرض.
• flex: 0 0 <size> -- استخدمها عندما تريد حجما دقيقا بدون مرونة. شائعة لعروض الاشرطة الجانبية مثل flex: 0 0 250px.

خاصية order

خاصية order تتحكم في الترتيب المرئي لعناصر flex دون تغيير ترتيب مصدر HTML. بشكل افتراضي، جميع العناصر لديها order: 0 وتظهر بترتيب المصدر. العناصر ذات قيم order الاقل تظهر اولا؛ العناصر ذات قيم order الاعلى تظهر لاحقا. العناصر ذات نفس قيمة order تحافظ على ترتيب مصدرها النسبي فيما بينها.

<div class="container">
    <div class="item" style="order: 3">الاول في HTML</div>
    <div class="item" style="order: 1">الثاني في HTML</div>
    <div class="item" style="order: 2">الثالث في HTML</div>
</div>

/* الترتيب المرئي: الثاني في HTML، الثالث في HTML، الاول في HTML */

.container {
    display: flex;
}

/* جميع العناصر افتراضيا order: 0 */
.item-last {
    order: 1;  /* ينتقل الى النهاية لان جميع الاخرين 0 */
}

/* القيم السلبية تنقل العناصر الى البداية */
.item-first {
    order: -1;  /* ينتقل الى البداية تماما */
}

align-self: المحاذاة الفردية

خاصية align-self تسمح لعنصر flex واحد بتجاوز قيمة align-items المعينة على حاويته. هذا يتيح لك محاذاة عنصر محدد بشكل مختلف عن البقية. تقبل نفس قيم align-items: auto وflex-start وflex-end وcenter وbaseline وstretch.

.container {
    display: flex;
    align-items: flex-start;  /* جميع العناصر تتم محاذاتها في الاعلى */
    height: 300px;
}

.item-centered {
    align-self: center;  /* هذا العنصر يتم توسيطه عموديا */
}

.item-bottom {
    align-self: flex-end;  /* هذا العنصر يذهب الى الاسفل */
}

.item-stretched {
    align-self: stretch;  /* هذا العنصر يمتد بالكامل */
}

.feature-cards {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.feature-card {
    flex: 1;
    padding: 20px;
    background: var(--bg-white);
    border-radius: 8px;
}

/* جعل البطاقة المميزة تمتد بالكامل */
.feature-card.highlighted {
    align-self: stretch;
    background: var(--primary-light);
    border: 2px solid var(--primary);
}

خوارزمية تحجيم Flex خطوة بخطوة

فهم كيف يحسب المتصفح احجام عناصر flex امر ضروري لتصحيح التخطيطات والتنبؤ بالسلوك. اليك الخوارزمية الكاملة، مقسمة الى خطوات واضحة:

1. تحديد اساس flex -- لكل عنصر، يحدد المتصفح حجمه الرئيسي الافتراضي. اذا كان flex-basis طولا (مثل 200 بكسل)، يستخدم ذلك. اذا كان flex-basis هو auto، يستخدم width/height للعنصر. اذا لم يتم تعيين اي منهما، يتحجم حسب المحتوى.
2. جمع اساسات flex -- اضف جميع الاحجام الرئيسية الافتراضية لكل عنصر flex في السطر.
3. المقارنة مع الحاوية -- اذا كان اجمالي اساسات flex اقل من حجم الحاوية الرئيسي، هناك مساحة حرة موجبة (العناصر ستنمو). اذا كان الاجمالي اكبر، هناك مساحة حرة سالبة (العناصر ستنكمش).
4. توزيع المساحة الحرة الموجبة -- اذا كانت هناك مساحة اضافية، اضرب عامل flex-grow لكل عنصر في نسبته من اجمالي عوامل النمو، ثم اضف هذا المقدار الى اساس العنصر.
5. توزيع المساحة الحرة السالبة -- اذا كانت هناك مساحة غير كافية، اضرب عامل flex-shrink لكل عنصر في اساس flex الخاص به (هذا الترجيح مهم)، ثم ازل مقدارا تناسبيا من اساس العنصر.
6. التقييد بالحد الادنى/الاقصى -- بعد النمو او الانكماش، قيد كل عنصر بـ min-width/max-width (او min-height/max-height في تخطيطات الاعمدة). اذا تم تقييد عنصر، جمده واعد توزيع المساحة المتبقية بين العناصر غير المجمدة.
7. التكرار اذا لزم الامر -- اذا تم تجميد اي عناصر في الخطوة 6، اعد حساب توزيع المساحة الحرة بين العناصر المرنة المتبقية. يستمر هذا حتى يتم توزيع كل المساحة او تجميد جميع العناصر.

.container {
    display: flex;
    width: 800px;
}

.item-a { flex: 2 1 100px; }  /* grow:2, shrink:1, basis:100px */
.item-b { flex: 1 1 200px; }  /* grow:1, shrink:1, basis:200px */
.item-c { flex: 1 2 100px; }  /* grow:1, shrink:2, basis:100px */

/* الخطوة 1: الاساسات = 100 + 200 + 100 = 400 بكسل */
/* الخطوة 2: الحاوية = 800 بكسل */
/* الخطوة 3: المساحة الحرة = 800 - 400 = 400 بكسل (موجبة) */
/* الخطوة 4: اجمالي النمو = 2 + 1 + 1 = 4 */
/*   العنصر A: 100 + (400 * 2/4) = 100 + 200 = 300 بكسل */
/*   العنصر B: 200 + (400 * 1/4) = 200 + 100 = 300 بكسل */
/*   العنصر C: 100 + (400 * 1/4) = 100 + 100 = 200 بكسل */
/* النهائي: 300 + 300 + 200 = 800 بكسل */

اصلاح الطفح min-width: 0

واحدة من اكثر مشاكل Flexbox احباطا هي الطفح غير المتوقع. بشكل افتراضي، عناصر flex لديها min-width: auto، مما يعني انها لن تنكمش ابدا اصغر من حجم محتواها الادنى. هذا يسبب للكلمات الطويلة وعناوين URL والمحتوى غير الملتف ان يجبر العنصر على الطفح خارج حاويته. الاصلاح بسيط: عين min-width: 0 على عنصر flex.

/* المشكلة */
.container {
    display: flex;
    width: 300px;
}

.item {
    flex: 1;
    /* عنوان URL طويل او كلمة داخل هذا العنصر ستمنع الانكماش */
    /* العنصر يطفح خارج الحاوية! */
}

/* الاصلاح */
.item {
    flex: 1;
    min-width: 0;  /* السماح بالانكماش اقل من حجم المحتوى */
    overflow: hidden;  /* او overflow: auto, text-overflow: ellipsis */
}

/* نمط شائع لقص النص في عناصر flex */
.text-truncate-flex {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

حيلة margin: auto في Flexbox

في Flexbox، لدى margin: auto قوة خارقة: تمتص كل المساحة الحرة المتاحة في اتجاه الهامش التلقائي. هذا مختلف عن تخطيط الكتلة حيث margin: 0 auto فقط يوسط افقيا. في حاويات flex، الهوامش التلقائية يمكنها دفع العناصر في اي اتجاه وهي مفيدة بشكل لا يصدق لانشاء الانماط الشائعة.

/* شريط تنقل مع شعار على اليسار وروابط على اليمين */
.navbar {
    display: flex;
    align-items: center;
    padding: 10px 20px;
}

.logo {
    /* يبقى على اليسار طبيعيا */
}

.nav-links {
    margin-left: auto;  /* يُدفع الى اقصى اليمين */
    display: flex;
    gap: 20px;
}

/* توسيط عنصر واحد افقيا وعموديا */
.container {
    display: flex;
    height: 100vh;
}

.centered-item {
    margin: auto;
    /* يمتص كل المساحة بالتساوي من جميع الجوانب = توسيط مثالي */
}

.card {
    display: flex;
    flex-direction: column;
    height: 350px;
}

.card-header { /* حجم طبيعي */ }
.card-body { /* حجم طبيعي */ }
.card-footer {
    margin-top: auto;  /* يُدفع الى اسفل البطاقة */
}

مثال عملي: تخطيط الكأس المقدسة

تخطيط الكأس المقدسة هو نمط تصميم ويب كلاسيكي يتضمن رأسا وتذييلا وثلاثة اعمدة (شريط جانبي ايسر ومحتوى رئيسي وشريط جانبي ايمن). كان من الصعب الشهير تحقيقه مع التعويم، لكن Flexbox يجعله مباشرا.

<div class="holy-grail">
    <header class="hg-header">الرأس</header>
    <div class="hg-body">
        <nav class="hg-nav">الشريط الجانبي الايسر</nav>
        <main class="hg-content">المحتوى الرئيسي</main>
        <aside class="hg-aside">الشريط الجانبي الايمن</aside>
    </div>
    <footer class="hg-footer">التذييل</footer>
</div>

.holy-grail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.hg-header, .hg-footer {
    flex: none;  /* flex: 0 0 auto -- حجم ثابت */
    padding: 20px;
    background: var(--primary);
    color: white;
}

.hg-body {
    display: flex;
    flex: 1;  /* flex: 1 1 0% -- ينمو لملء المساحة المتبقية */
}

.hg-nav {
    flex: 0 0 200px;  /* شريط جانبي ثابت 200 بكسل */
    padding: 20px;
    background: var(--bg-light);
}

.hg-content {
    flex: 1;  /* يأخذ كل المساحة المتبقية */
    padding: 20px;
    min-width: 0;  /* منع الطفح */
}

.hg-aside {
    flex: 0 0 180px;  /* شريط جانبي ثابت 180 بكسل */
    padding: 20px;
    background: var(--bg-light);
}

/* متجاوب: تكديس على الهاتف */
@media (max-width: 768px) {
    .hg-body {
        flex-direction: column;
    }
    .hg-nav, .hg-aside {
        flex-basis: auto;  /* ارتفاع تلقائي عند التكديس */
    }
    .hg-nav {
        order: -1;  /* نقل التنقل فوق المحتوى على الهاتف */
    }
}

مثال عملي: التذييل اللاصق

التذييل اللاصق يبقى في اسفل نافذة العرض عندما يكون المحتوى قصيرا، لكنه يُدفع للاسفل طبيعيا عندما يكون المحتوى طويلا. هذا واحد من ابسط واكثر انماط Flexbox اناقة.

<body class="sticky-footer-layout">
    <header>رأس الموقع</header>
    <main>محتوى الصفحة الذي قد يكون قصيرا او طويلا...</main>
    <footer>التذييل اللاصق</footer>
</body>

.sticky-footer-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    flex: none;  /* الرأس يبقى بحجمه الطبيعي */
}

main {
    flex: 1;  /* المحتوى الرئيسي ينمو لدفع التذييل للاسفل */
}

footer {
    flex: none;  /* التذييل يبقى بحجمه الطبيعي */
}

السحر في flex: 1 على عنصر main. عندما يكون المحتوى قصيرا، تنمو منطقة main لامتصاص كل ارتفاع نافذة العرض الاضافي، مبقية التذييل مثبتا في الاسفل. عندما يكون المحتوى اطول من نافذة العرض، تأخذ منطقة main ارتفاعها الطبيعي ويجلس التذييل طبيعيا تحتها.

مثال عملي: كائن الوسائط

نمط كائن الوسائط يعرض صورة او ايقونة بجانب كتلة نصية. انه منتشر في كل مكان في تصميم الويب -- فكر في التعليقات والملفات الشخصية وقوائم الاشعارات وخلاصات وسائل التواصل الاجتماعي.

<div class="media-object">
    <img class="media-image" src="avatar.jpg" alt="صورة المستخدم">
    <div class="media-body">
        <h3>اسم المستخدم</h3>
        <p>هذا نص جسم التعليق الذي يمكن ان يكون باي طول
        وسيلتف طبيعيا ضمن المساحة المتاحة.</p>
    </div>
</div>

.media-object {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.media-image {
    flex: none;  /* الصورة لا تنمو ولا تنكمش ابدا */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.media-body {
    flex: 1;      /* منطقة النص تأخذ كل المساحة المتبقية */
    min-width: 0; /* منع الطفح من الكلمات الطويلة */
}

.media-body h3 {
    margin: 0 0 4px;
}

.media-body p {
    margin: 0;
    color: var(--text-light);
}

دمج خصائص العناصر: انماط متقدمة

تخطيطات العالم الحقيقي غالبا تجمع بين خصائص عنصر flex متعددة لتحقيق تحكم دقيق في كيفية تصرف العناصر مع تغير حجم الحاوية.

.dashboard-row {
    display: flex;
    gap: 20px;
}

/* لوحة احصائيات ثابتة العرض */
.stats-panel {
    flex: 0 0 300px;
    /* لا تنمو ابدا، لا تنكمش ابدا، دائما 300 بكسل */
}

/* منطقة الرسم البياني الرئيسية التي تملأ المساحة المتبقية */
.chart-panel {
    flex: 1 1 0%;
    min-width: 0;
    /* تنمو وتنكمش، تبدأ من 0، مشاركة متساوية */
}

/* معلومات جانبية يمكنها الانكماش لكن تفضل 250 بكسل */
.info-panel {
    flex: 0 1 250px;
    /* لا تنمو، يمكنها الانكماش اذا لزم الامر، تبدأ عند 250 بكسل */
}

.input-group {
    display: flex;
}

.input-group input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-right: none;
    border-radius: 4px 0 0 4px;
}

.input-group button {
    flex: none;
    padding: 8px 20px;
    background: var(--primary);
    color: white;
    border: 1px solid var(--primary);
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}