منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

Flexbox شرح

- لو سألتني ما هو اهم درس في الCSS ؛ هقولك ومن غير تفكير ال flexbox
- لو عاوز تبقى مُحترف في الCSS يبقى لازم تحترف خاصية ال flexbox
- ال flexbox يعتمد في الأساس ان يوجد عنصر أب (parent element) وعناصر داخل هذا الأب (child element) وللتوضيع أكثر انظر المثال التالي:



<!DOCTYPE html>
<html lang="ar">
  <head>
    <style>
      .container {display: flex;}
    </style>
  </head>

  <body>
    <div class="container">
      <div class="child1">الطفل الاول</div>
      <div class="child2">الطفل الثانى</div>
      <div class="child3">الطفل الثالث</div>
    </div>
  </body>
</html>

Flexbox شرحFlexbox شرح
parent (container) element VS child element

أكواد ال flexbox تنقسم الى جزئين:

A- اكواد خاصة بالعنصر الأب (parent element)

B- أكواد خاصة بالعناصر التي بداخل العنصر الاب (child elements)





A- الاكواد الخاصة بالعنصر الأب (parent element)


  • 1display: flex;
  • 2flex-direction: row;
  • 3flex-wrap: wrap;
  • 4flex-flow: row wrap;
  • 5justify-content: center;
  • 6align-content: center;

شرح الاكواد

1display: flex;

- شرحنا خاصية الdisplay فيفي درس خاص به
وإذا أردنا الاستفادة من مميزات ال flexbox فإننا نضعdisplay: flex;للعنصر الاب ثم نستخدم باقي الاكواد التي بالأسفل.

وعندما نستخدم هذا الكود يجب ان تعرف ان هناك المحور الأفقي (X-axis)
والمحور الرأسي (Y-axis)وسوف نلاحظ ان جميع العناصر الأطفال تم ترتيبهم افقياً على محور ال X؛ واهم سؤال في العالم هل العناصر سوف يتم ترتيبهم من اليمين الى اليسار ولا من اليسار الى اليمين؟
والاجابة هنا عميقة شوية😂لان بيتم ترتيب العناصر من بداية المحور الى نهاية المحور
سؤال كمان معلش😊كيف يتم تحديد بداية ونهاية المحور الأفقي x-axis←؟
ج/ على حسب ال dir وال dir اما dir="rtl"اوdir="ltr"
- اذا كان ال dir="rtl" معنى ذلك ان بداية المحور هي جهة اليمين
- اذا كان ال dir="ltr" معنى ذلك ان بداية المحور هي جهة اليسار
مثال على ذلك :


<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {display: flex;}
      .child{background-color: rgb(105, 143, 255); 
        padding: 20px; 
        margin: 10px;}
    </style>
  </head>
  <body>

    <div dir="ltr" class="container">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
    </div>

  </body>
</html>

- وهنا سوف يتم ترتيب العناصر افقياً على محور الX بدءاً من من جهة اليسار الى جهة اليمين لأن الdir هو ltr
وسوف تكون هذه النتيجة

CSS flexbox
dir="ltr"



واذا تم تغيير الdir الى rtl الخاص بالcontainer سوف تكون هذه هى النتيجة👇

CSS flexbox
dir="rtl"


اذا اردنا وضع عنصر بجوار الcontainer مِثل الdiv فإن ذلك الcontainer نضع لهdisplay: inline-flex;بدلا منdisplay: flex;
- مثال على ذلك؛ هذه الاكواد


<!DOCTYPE html>
<html>
  <head>
    <style>
      .ali {display: inline-block;}
      .container {
        display: inline-flex;
        border: 2px solid red;
      }
      .child {
        background-color: rgb(105, 143, 255);
        padding: 20px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div dir="ltr" class="container">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
    </div>

    <div class="ali">ali hassan</div>
  </body>
</html>

هذه الاكواد👆تُعطى هذه النتيجة👇

CSS flexbox
display: inline-flex;



2flex-direction: row;

عرفنا فوق👆ان العناصر تلقائي بتكون على محور الX ولكن اذا اردنا تغيير ذلك واردنا ان يتم ترتيب العناصر على محور الY من اعلى الى اسفل نستخدم خاصية ال flex-direction وتكون قيمتهاflex-direction: column;



ال flex-direction يُعبر عناتجاه المحور


CSS flexbox
flex-direction



وهذه اهم قيم الflex-direction
flex-direction:
row; - ترتب العناصر على محور الX من بداية المحور الى نهاية المحور
- وهى القيمة الافتراضية
row-reverse;ترتب العناصر على محور الX بالعكس
column;ترتيب العناصر من اعلى الى أسفل
column-reverse;ترتيب العناصر من أسفل الى اعلى

وتقدر تشوف كل قيمة من دول بتعمل ايه بالظبط لماتضغط هنااوتضغط هنا




3flex-wrap: wrap;

قلنا قبل كده👆ان العناصر الchild يتم ترتيبهم أفقي على محور الX ولكن سنواجه مشاكل عند عرض الموقع على الشاشات الصغيرة مثل الموبايل
و المشاكل هي :

  1. اختفاء أجزاء من العناصر الchild بسبب ان عرض هذه العناصر اكبر من عرض الشاشة
  2. تَقلص او تصغير عرض العنصر الchild

ونحل المشاكل دي عن طريق خاصية الflex-wrap: wrap;
ما هي وظيفة الflex-wrap: wrap;؟
وظيفتها جعل العناصر الchild تنتقل الى السطر التالي في حالة ان لا يوجد مساحة كافيه لعرض العناصر الchild بحجمها الطبيعي

CSS flexbox
flex-wrap: wrap;


والقيمة الافتراضية هيflex-wrap: nowrap;وتعني عدم انتقال العناصر الى السطر التالي.

وتقدر تشوف كل قيمة من دول بتعمل ايه بالظبط لماتضغط هنااوتضغط هنااوتضغط هنا



4flex-flow: row wrap;

بما اننا سوف نستخدم ال flex-directionوال flex-wrap كثيرا فالرجالة صحاب الCSS😂عملوا لنا اختصار وهو flex-flow وتكون:
- اول قيمة هي قيمة الflex-direction
- والقيمة الثانية هي قيمة الflex-wrap



5justify-content: center;

يستخدم هذا الكود لمحاذاة العناصر الchild في المحور الرئيسي.
مثال على ذلك:
- إذا كان الflex-direction: row;فانه سوف يتم محاذاة العناصر على محور الX
- وإذا كان ال flex-direction: column;فانه سوف يتم محاذاة العناصر على محور الY



وهذه اهم قيم ال justify-content
justify-content:
center; جعل العناصر في المنتصف على محور الX في حالة ال flex-direction: row;
flex-start;القيمة الافتراضية
flex-end;اضغط تحت واعرف بالظبط دى بتعمل ايه😉
space-between;مش هقولك😉
space-around;مش هقولك😉

لو عاوز تعرف كل قيمة من دول بتعمل ايهاضغط هنااواضغط هنا



6align-content: center;

الكود ده بالضبط عكس ال justify-content من حيث المحور
لأنه يُستخدم لمحاذاة العناصر الchild فيالمحور الثانوي
مثال على ذلك
- إذا كان الflex-direction: row;فانه سوف يتم محاذاة العناصر علىعلى محور الY
- وإذا كان الflex-direction: column;فانه سوف يتم محاذاة العناصر علىمحور الX




وهذه اهم قيم ال align-content
align-content:
center; جعل العناصر في المنتصف على محور الY في حالة ال flex-direction: row;
flex-start;اضغط تحت واعرف بالظبط دى بتعمل ايه😉
flex-end;مش هقولك😉
stretch;القيمة الافتراضية
space-between;اضغط تحت واعرف بالظبط دى بتعمل ايه
space-around;اضغط تحت واعرف بالظبط دى بتعمل ايه

لو عاوز تعرف كل قيمة من دول بتعمل ايهاضغط هنااواضغط هنا



من الأخر يعنى لو عاوز العنصر يكون في المنتصف رأسيًا وأفقيًا نستخدمjustify-content: center;وalign-content: center;




B- الأكواد الخاصة بالعناصر التي بداخل العنصر الاب (child elements)


  • 1flex-grow: 0;
  • 2flex-shrink: 1;
  • 3flex-basis: auto;
  • 4flex: 0 1 auto;
  • 5order: 0;

شرح الاكواد

1flex-grow: 0;

متى نستخدم خاصية ال flex-grow؟
تُستخدم هذه الخاصية عندما يكون عرض الcontainer اكبر منمجموع عرض العناصر الchild


CSS flexbox
عرض الcontainer > مجموع عرض العناصر الchild


- وبالتالي يوجد مساحة فارغة داخل الcontainer واذا اردنا العناصر الchild ان تتمدد (grow) حتى لا يصبح هناك مساحة فارغة داخل الcontainer فإننا نستخدم خاصية الflex-grow
- والقيمة الافتراضية لل flex-growهي 0 ومعناها ان العنصر الchild لا يتمدد
وعندما يكون الflex-grow: 1;فمعنى ذلك اننا نسمح لهذا العنصر بالتمدد حتى يأخذ المساحة المتبقية من الcontainer


CSS flexbox



CSS flexbox



CSS flexbox



CSS flexbox



والقيمة الإفتراضية هىflex-grow: 0;ومعني ذلك اننا لانسمح للعنصر بالتمدد.

سؤال معلش يا صاحبي😊هل ينفع تكون قيمة ال flex-grow غير ال الصفر والواحد؟
ج/ الإجابة هتكون بالتفصيل في الفيديو يا صديقي😊عشان صعب إني اشرحها كتابة لازم عملي




2flex-shrink: 1;

متى نستخدم خاصية ال flex-shrink ؟
تُستخدم هذه الخاصية عندما يكونمجموع عرض العناصر الchildاكبر من عرض الcontainer
ونستخدمها ليه اصلاً؟
نستخدمها عندما لا نريد من العنصر الchild ان ينكمش (shrink)
لان العناصر الchild اذا كان حجمها كبير فإنها تتقلص تلقائياً




CSS flexbox



ليه معرفش عرضة؟
لان ببساطة مجموع عرض العناصر الchild يساوى 360وبالتالي اكبر من عرض الcontainer الذى عرضة 300px
ولمنع حدوث الshrink للعناصر الchild نضعflex-shrink: 0;



CSS flexbox





CSS flexbox



والقيمة الإفتراضية هىflex-shrink: 1;ومعني ذلك اننا نسمح للعنصر بالتقلص.


المُلخص
1- إذا كان قيمة ال flex-shrink تساوى 1 فمعنى ذلك اننا نسمح للعنصر بالتقلص (shrink) إذا كان عرض العناصر الchild اكبر من عرض الcontainer
2- وإذا كانت قيمة ال flex-shrink تساوى 0 فمعنى ذلك اننا لا نسمح للعنصر بالتقلص (shrink)




3flex-basis: auto;

خاصية الflex-basis هي التي تُحدد عرض او ارتفاع العنصر الchild
ايواااا يعنى ال flex-basis بتحدد عرض العنصر ولا ارتفاع العنصر؟؟؟🤔
ج/ والله على حسب ال flex-direction
- في حالة ان ال flex-direction: row;فإن ال flex-basis تُحدد عرض العنصر
- في حالة ان ال flex-direction: column;فإن ال flex-basis تُحدد ارتفاع العنصر
وقيمة الauto هي القيمة الافتراضية.
- ويُمكن تحديد عرض العنصر عن طريق ال px او ال %
- وانا اُفضل تحديد عرض العنصر عن طريق ال % من حجم الcontainer


والقيمة الإفتراضية هىflex-basis: auto;ومعني ذلك معنى ذلك ان العنصر في العرض او الطول الطبيعي له .




4flex: 0 1 auto;

هذا هو الكود المختصر لتحديد قيم ال flex-grow و flex-shrink و flex-basis بدلاً من كتابة كل كود منفصل
والقيم الافتراضية هي :
flex: 0 1 auto;

معنى كل قيمة


0 : معني ذلك اننا لا نسمح للعنصر بالامتداد (grow) اذا كانت هناك مساحة فارغة داخل الcontainer

1 : معني ذلك اننا نسمح للعنصر بالتقلص(shrink) اذا كان عرض العنصر اكبر من عرض الcontainer

Auto : معنى ذلك ان العنصر في العرض او الطول الطبيعي





5order: 0;

نستخدم هذا الكود لترتيب العناصر الchild والعنصر الذى يحتوى على قيمة اقل هذا هو العنصر الذى يكون في بداية الترتيب

- في حالة ان ال flex-direction: row;وأيضا ال dir="ltr"فإن الترتيب سوف يبدأ من اليسار الى اليمين

- في حالة ان ال flex-direction: row;وأيضا ال dir="rtl"فإن الترتيب سوف يبدأ من اليمين الى اليسار

- في حالة ان ال flex-direction: column;فإن الترتيب سون يبدأ من اعلى الى أسفل

ولماتضغط هنااوتضغط هناهتقدر تشوف امثلة على الorder





المُلخص يابن عمي🔥🔥


1- عشان نطبق خاصية الflexbox فأننا نضعdisplay: flex;داخل العنصر الأب (الcontainer)
2- بعض الأكواد خاصة بالعنصر الأب (الcontainer) والبعض الأخر خاص بالعناصر الchild (التي داخل الcontainer)
3- العناصر الflex يتم ترتيبهم على محور واحد فقط سواء المحور الأفقي او الرأسي وانت المسؤول عن تحديد المحورواهم حاجة في الليلة دي كلهاانك تكون عارف فين بداية المحور ونهاية المحور.
ودااهم لينكتقدر تفهم منه ال flexbox بالتطبيق



من الأخر خالص يعني😍😍

انا المسئول انى اخليك تفهم كل كود من دول بيعمل ايه بالتفصيل وهتفهم مِنى وكل حاجة بس لما هتيجي تطبق مع نفسك هتلاقى الموضوع صعب جدا😢

والحل😍إنك تتمرن كتييييير على ال flex-box قبل ما تعمل تطبيقات مع نفسك؛ يعني بردو انت هتعمل ايه؟؟
هتروح على اليوتيوب وتكتبflexbox examplesوتبدأ بقا تطبق على ال flexbox بمزاج يا صاحبي؛ ودي قائمة بفيديوهات تطبيقية على ال flexboxflexbox examples




Do not waste your time and start with us, now 😍