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)

الفهرس

parent element

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

child element

  1. flex-grow: 0;
  2. flex-shrink: 1;
  3. flex-basis: auto;
  4. flex: 0 1 auto;
  5. order: 0;
🔥 🔥 المُلخص

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


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

شرح الاكواد

1 display: 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;

2 flex-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;ترتيب العناصر من أسفل الى اعلى

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

3 flex-wrap: wrap;

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

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

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

CSS flexbox
flex-wrap: wrap;

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

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

4 flex-flow: row wrap;

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

5 justify-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;مش هقولك 😉

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

6 align-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)


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

شرح الاكواد

1 flex-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 غير ال الصفر والواحد؟
ج/ الإجابة هتكون بالتفصيل في الفيديو يا صديقي 😊 عشان صعب إني اشرحها كتابة لازم عملي

2 flex-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)

3 flex-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; ومعني ذلك معنى ذلك ان العنصر في العرض او الطول الطبيعي له .

4 flex: 0 1 auto;

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

معنى كل قيمة


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

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

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

5 order: 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 بمزاج يا صاحبي؛ ودي قائمة بفيديوهات تطبيقية على ال flexbox flexbox examples


😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك