Flex Grow

1. 1. Flex Grow: دليل شامل للمبتدئين

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

ما هو Flexbox؟

قبل أن نتعمق في Flex Grow، من المهم فهم أساسيات Flexbox. Flexbox هو نموذج تخطيط أحادي البعد (one-dimensional layout) في CSS، مما يعني أنه يتعامل إما مع صفوف أو أعمدة في كل مرة. يوفر Flexbox طريقة فعالة لتوزيع المساحة بين العناصر داخل حاوية، وتحديد ترتيب العناصر، ومحاذاة العناصر بسهولة.

• الحاوية المرنة (Flexible Container): العنصر الأب الذي يحتوي على العناصر المرنة. يتم تعيين الخاصية `display: flex;` أو `display: inline-flex;` على هذا العنصر.
• العناصر المرنة (Flexible Items): العناصر الأبناء المباشرة للحاوية المرنة.
• المحور الرئيسي (Main Axis): المحور الذي تُرتب عليه العناصر المرنة. افتراضياً، يكون المحور الرئيسي أفقيًا.
• المحور العرضي (Cross Axis): المحور العمودي على المحور الرئيسي.

لمزيد من المعلومات حول Flexbox، راجع CSS Flexbox و Flex Container.

فهم Flex Grow

Flex Grow هي خاصية تُطبق على العناصر المرنة، وتحدد مقدار المساحة الإضافية التي يجب أن يشغلها العنصر بالنسبة للعناصر المرنة الأخرى في نفس الحاوية. تأخذ Flex Grow قيمة رقمية. كلما زادت القيمة، زادت المساحة التي يشغلها العنصر.

• القيمة الافتراضية لـ Flex Grow هي `0`. هذا يعني أن العنصر لن ينمو ليشغل أي مساحة إضافية.
• إذا تم تعيين قيمة Flex Grow أكبر من 0، فإن العنصر سيشغل جزءًا من المساحة المتاحة في الحاوية.
• إذا تم تعيين قيم Flex Grow مختلفة لعناصر مرنة متعددة، فسيتم توزيع المساحة المتاحة بناءً على هذه القيم.

• • كيف يتم حساب المساحة المتاحة؟**

1. حساب المساحة الكلية المتاحة: يتم حساب المساحة المتاحة بطرح عرض (أو ارتفاع، حسب اتجاه Flexbox) العناصر المرنة من عرض (أو ارتفاع) الحاوية المرنة. 2. حساب مجموع قيم Flex Grow: يتم جمع قيم Flex Grow لجميع العناصر المرنة في الحاوية. 3. توزيع المساحة: يتم تقسيم المساحة الكلية المتاحة على مجموع قيم Flex Grow. هذا يعطينا قيمة "وحدة النمو" (growth unit). 4. تخصيص المساحة لكل عنصر: يتم ضرب قيمة Flex Grow لكل عنصر في وحدة النمو لتحديد مقدار المساحة التي يجب أن يشغلها هذا العنصر.

أمثلة عملية لـ Flex Grow

لنفترض أن لدينا حاوية مرنة تحتوي على ثلاثة عناصر مرنة: العنصر الأول، العنصر الثاني، والعنصر الثالث.

المثال الأول: Flex Grow = 0 لجميع العناصر

```css .container {

 display: flex;
 width: 300px;

}

.item {

 width: 100px;
 flex-grow: 0;

} ```

في هذا المثال، سيكون عرض كل عنصر 100px، ولن يشغل أي عنصر مساحة إضافية. ستبقى هناك مساحة فارغة بمقدار 100px في الحاوية.

المثال الثاني: Flex Grow = 1 لجميع العناصر

```css .container {

 display: flex;
 width: 300px;

}

.item {

 flex-grow: 1;

} ```

في هذا المثال، سيتم توزيع المساحة المتاحة (100px) بالتساوي بين العناصر الثلاثة. سيصبح عرض كل عنصر 100px + (100px / 3) = 133.33px تقريبًا.

المثال الثالث: قيم Flex Grow مختلفة

```css .container {

 display: flex;
 width: 300px;

}

.item1 {

 flex-grow: 1;

}

.item2 {

 flex-grow: 2;

}

.item3 {

 flex-grow: 1;

} ```

في هذا المثال، سيكون مجموع قيم Flex Grow هو 1 + 2 + 1 = 4. سيتم توزيع المساحة المتاحة (100px) بناءً على هذه القيم.

• العنصر الأول سيشغل (1 / 4) * 100px = 25px إضافية.
• العنصر الثاني سيشغل (2 / 4) * 100px = 50px إضافية.
• العنصر الثالث سيشغل (1 / 4) * 100px = 25px إضافية.

وبالتالي، سيكون عرض العناصر:

• العنصر الأول: 100px + 25px = 125px
• العنصر الثاني: 100px + 50px = 150px
• العنصر الثالث: 100px + 25px = 125px

Flex Grow و Flex Basis و Flex Shrink

Flex Grow تعمل جنبًا إلى جنب مع خاصيتين أخريين في Flexbox: Flex Basis و Flex Shrink. فهم العلاقة بين هذه الخصائص الثلاث ضروري لتصميم تخطيطات مرنة بشكل فعال.

• Flex Basis: تحدد الحجم الأولي للعنصر المرن قبل توزيع المساحة المتاحة. يمكن أن تكون قيمة Flex Basis طولًا (مثل `100px`) أو كلمة رئيسية مثل `auto` (الافتراضي).
• Flex Shrink: تحدد مقدار تقليل حجم العنصر المرن إذا لم تكن هناك مساحة كافية في الحاوية. القيمة الافتراضية لـ Flex Shrink هي `1`.

• • الصيغة المختصرة:** يمكنك استخدام خاصية `flex` لتعيين قيم Flex Grow و Flex Basis و Flex Shrink في سطر واحد.

```css flex: <flex-grow> <flex-shrink> <flex-basis>; ```

على سبيل المثال: `flex: 1 1 auto;`

حالات الاستخدام الشائعة لـ Flex Grow

• إنشاء تخطيطات متجاوبة: يمكن استخدام Flex Grow لإنشاء تخطيطات تتكيف مع أحجام الشاشات المختلفة. على سبيل المثال، يمكنك تعيين Flex Grow بقيمة 1 لجميع العناصر في شريط التنقل، بحيث تتوزع المساحة المتاحة بالتساوي بين العناصر.
• توزيع المساحة بالتساوي: كما رأينا في الأمثلة السابقة، يمكن استخدام Flex Grow لتوزيع المساحة المتاحة بالتساوي بين العناصر.
• إنشاء تخطيطات ذات أعمدة مرنة: يمكن استخدام Flex Grow لإنشاء تخطيطات ذات أعمدة مرنة، حيث ينمو العمود الأوسط ليشغل المساحة المتاحة، بينما تظل الأعمدة الجانبية ثابتة.
• تصميم واجهات المستخدم الحديثة: يستخدم Flex Grow على نطاق واسع في تصميم واجهات المستخدم الحديثة لإنشاء تخطيطات مرنة وسهلة الاستخدام.

نصائح وحيل لاستخدام Flex Grow

• ابدأ بـ Flex Basis: حدد حجم Flex Basis الأولي للعناصر المرنة قبل تعيين قيم Flex Grow.
• استخدم قيمًا نسبية: استخدم قيمًا نسبية لـ Flex Grow (مثل 1، 2، 3) بدلاً من قيم مطلقة (مثل 100px، 200px). هذا سيجعل التخطيط أكثر مرونة.
• انتبه إلى Flex Shrink: تأكد من أنك تفهم كيف يعمل Flex Shrink، خاصةً إذا كنت تعمل مع تخطيطات ضيقة.
• اختبر على أحجام شاشات مختلفة: اختبر تخطيطك على أحجام شاشات مختلفة للتأكد من أنه يعمل بشكل صحيح.
• استخدم أدوات المطور: استخدم أدوات المطور في متصفحك لفحص العناصر المرنة وتعديل قيم Flex Grow و Flex Basis و Flex Shrink لمعرفة كيفية تأثيرها على التخطيط.

الخلاصة

Flex Grow هي خاصية أساسية في CSS Flexbox تسمح لك بإنشاء تخطيطات مرنة ومتجاوبة. من خلال فهم كيفية عمل Flex Grow، وكيفية استخدامه جنبًا إلى جنب مع Flex Basis و Flex Shrink، يمكنك تصميم واجهات مستخدم حديثة وسهلة الاستخدام. تذكر أن الممارسة والتجربة هما أفضل طريقة لإتقان هذه الخاصية القوية.

روابط ذات صلة

• CSS
• CSS Flexbox
• Flex Container
• Flex Item
• Flex Basis
• Flex Shrink
• التحليل الفني للخيارات الثنائية
• استراتيجيات الخيارات الثنائية
• إدارة المخاطر في الخيارات الثنائية
• تحليل حجم التداول في الخيارات الثنائية
• مؤشرات التداول في الخيارات الثنائية
• استراتيجية المضاربة
• استراتيجية الاختراق
• استراتيجية المتوسط المتحرك
• استراتيجية بولينجر باند
• استراتيجية RSI
• تداول الخيارات الثنائية للمبتدئين
• تداول الخيارات الثنائية المتقدم
• تداول الخيارات الثنائية على الأخبار
• تداول الخيارات الثنائية على المدى القصير
• تداول الخيارات الثنائية على المدى الطويل
• تداول الخيارات الثنائية باستخدام التحليل الأساسي
• تداول الخيارات الثنائية باستخدام التحليل الفني
• تداول الخيارات الثنائية باستخدام أنماط الشموع اليابانية
• تداول الخيارات الثنائية باستخدام نظرية الموجات الإليوت
• تداول الخيارات الثنائية باستخدام خطوط الاتجاه
• تداول الخيارات الثنائية باستخدام مستويات الدعم والمقاومة

ابدأ التداول الآن

سجّل في IQ Option (الحد الأدنى للإيداع 10 دولار) افتح حساباً في Pocket Option (الحد الأدنى للإيداع 5 دولار)

انضم إلى مجتمعنا

اشترك في قناة Telegram الخاصة بنا @strategybin لتصلك: ✓ إشارات تداول يومية ✓ تحليلات استراتيجية حصرية ✓ تنبيهات اتجاهات السوق ✓ مواد تعليمية للمبتدئين