تعلم flex box

سأوضح لك Flexbox بشكل بسيط وسهل مع توضيح ذلك بالأكواد.

أولاً شرح Flexbox بشكل مختصر

في البداية Flexbox هي تقنية CSS تستخدم لتنسيق وترتيب العناصر داخل الصفحة. تم تصميم Flexbox لتسهيل تنسيق العناصر داخل العناصر الأساسية مثل العناصر المتداخلة، والأزواج، والأعمدة، والأرقام.

يمكن استخدام Flexbox لتنسيق العناصر على محور واحد أو عدة محاور في نفس الوقت. يتم تحديد ترتيب وموقع العناصر في Flexbox باستخدام خصائص CSS مثل display وflex-direction وjustify-content وalign-items وغيرها.

فيما يلي مثال بسيط على استخدام Flexbox لترتيب العناصر على محور واحد:

<div class="flex-container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
</div>

<style>
  .flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .box1, .box2, .box3 {
    background-color: lightblue;
    padding: 10px;
    margin: 10px;
    flex: 1;
  }
</style>

في المثال السابق، تم استخدام Flexbox لترتيب العناصر على محور واحد (المحور الأفقي) باستخدام الخصائص display: flex و flex-direction: row. تم توزيع العناصر على المحور الأفقي باستخدام justify-content: space-between لترك فراغ بين الصناديق 1 و 2 و 3. تم تحديد موضع العناصر على المحور الرأسي باستخدام align-items: center.

لاحظ أن العناصر الثلاثة (box1 و box2 و box3) لديها خاصية flex: 1 التي تحدد نسبة الفضاء المتاح لكل صندوق داخل العنصر المرن. هذا يساعد على توزيع العناصر على المحور الأفقي بشكل متساوٍ.

أدوات لاستخدام وفهم flexbox بشكل سهل وبسيط

عليك باستخدام الموقع التالي إذا كنت تريد فهم خصائص flexbox حيث يعرض خصائص flexbox على هيئة صور متحركة لتبيان ماذا تفعل كل خاصية، فضع ذلك الموقع أمامك وأنت تستخدم flexbox وستجد نفسك قد فهمته بسهولة.

• https://flexbox.malven.co/

وأيضًا هناك بعض ألعاب المتصفح التي غرضها تعليمك كيفية استخدام فليكس بوكس من خلال لعبة مسلية، وإليك بعضها:

• https://flexboxfroggy.com/
• https://codingfantasy.com/games/flexboxadventure

شرح Flexbox بشكل مفصل

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

1- display

خاصية display تحدد نوع عرض Flexbox. يمكن تعيينها إلى القيمة flex لعرض Flexbox. ويمكن تعيينها إلى inline-flex لعرض Flexbox على نفس سطر النص.

.flex-container {
  display: flex;
}

2- flex-direction

خاصية flex-direction تحدد توجه العناصر داخل Flexbox. يمكن تعيينها إلى row لتوجيه العناصر أفقيًا، وإلى column لتوجيهها عموديًا. ويمكن استخدام row-reverse أو column-reverse لتوجيه العناصر بالاتجاه المعاكس.

.flex-container {
  display: flex;
  flex-direction: row;
}

3- flex-wrap

خاصية flex-wrap تحدد ما إذا كانت العناصر في Flexbox يجب أن تنتقل إلى السطر التالي إذا كانت المساحة غير كافية. يمكن تعيينها إلى nowrap لعدم السماح بالتعبئة الزائدة، وإلى wrap للسماح بالتعبئة الزائدة وانتقال العناصر إلى السطر التالي.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

4- justify-content

خاصية justify-content تحدد توزيع العناصر على محور Flexbox. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور، وإلى flex-end لتوزيعها على نهاية المحور، وإلى center لتوزيعها على وسط المحور، وإلى space-between لتوزيعها بتساوٍ على المحور، وإلى space-around لتوزيعها بالتساوي مع توفير مساحة إضافية حول كل عنصر.

.flex-container {
  display: flex;
   justify-content: center;
}

5- align-items

خاصية align-items تحدد توزيع العناصر على محور عمودي متعامد على محور Flexbox. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور العمودي، وإلى flex-end لتوزيعها على نهاية المحور العمودي، وإلى center لتوزيعها على وسط المحور العمودي، وإلى baseline لتوزيعها على خط الأساس للنص، وإلى stretch لتوسيع العناصر لتملأ المساحة العمودية بأكملها.

.flex-container {
  display: flex;
  align-items: center;
}

6- align-content

خاصية align-content تحدد توزيع العناصر الإضافية في الفراغ الإضافي على محور عمودي متعامد على محور Flexbox عند استخدام التعبئة الزائدة. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور العمودي، وإلى flex-end لتوزيعها على نهاية المحور العمودي، وإلى center لتوزيعها على وسط المحور العمودي، وإلى space-between لتوزيعها بتساوٍ على المحور، وإلى space-around لتوزيعها بالتساوي مع توفير مساحة إضافية حول كل عنصر، وإلى stretch لتوسيع العناصر لتملأ المساحة العمودية بأكملها.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

7- flex-grow

خاصية flex-grow تحدد قدرة العنصر على التوسع في المساحة المتاحة. يمكن تعيينها إلى أي عدد صحيح (عادةً ما تستخدم قيم 0 و 1) ، حيث يتم توزيع المساحة المتاحة بالتساوي على جميع العناصر الذين يحملون هذه الخاصية بنسبة تناسبية مع قيمتها.

.flex-item {
  flex-grow: 1;
}

8- flex-shrink

flex-shrink تحدد قدرة العنصر على الانكماش في حالة اضطراره لتقليص حجمه بسبب الفراغ المتاح لمجموعة Flexbox. يمكن تعيينها إلى أي عدد صحيح (عادةً ما تستخدم قيم 0 و 1) ، حيث يتم توزيع المساحة المتاحة بالتساوي على جميع العناصر الذين يحملون هذه الخاصية بنسبة تناسبية مع قيمتها. على سبيل المثال، عندما تقلل المساحة المتاحة، فإن العناصر التي تحمل القيم الأعلى ستتقلص بشكل أسرع من العناصر التي تحمل القيم الأقل.

.flex-item {
  flex-shrink: 1;
}

9- flex-basis

خاصية flex-basis تحدد الحجم الأولي للعنصر قبل توزيع المساحة الإضافية المتاحة بين العناصر الموجودة في Flexbox. يمكن تعيينها إلى القيمة التي تعبر عن العرض أو الارتفاع، مثل 200px أو 50%. يمكن استخدام auto لتحديد حجم العنصر بناءً على حجم محتواه الفعلي.

.flex-item {
  flex-basis: 100px;
}

10- flex

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

.flex-item {
  flex: 1 0 auto;
}

وبذلك إنتهينا من أهم الخصائص المستخدمة في Flexbox، والتي يمكن استخدامها لتنظيم وتحكم في توزيع العناصر وتحديد موقعها في الصفحة.

مصادر

يوجد الكثير من المصادر لتعلم Flexbox وقد ذكر مصطفي أغلبها ولكن إذا كنت تفضل الفيديوهات يوجد بعض القنوات العربية والأنجليزية علي اليوتيوب التي تشرح Flexbox بطريقة جيدة,  ويوجد علي موقع حسوب i/o هذا النقاش الذي بعنوان "هل تريد تعلم Css Flexbox حتى الإحتراف ؟ إليك هذه المصادر"  يوجد به الكثير من المصادر العربية والتي هي عبارة عن فيديوهات تشرح كل خواص Flexbox بالتفصيل.

ونصيحتي لك أن تتعلم أيضا Grid System فهو يستخدم أيضا لترتيب عناصر HTML في الصفحة وهذه بعض المصادر إذا أردت تعلمه.

CSS Flexbox او CSS GRID?

بالإضافة للشرح المفصل الرائع في التعليقات السابقة يعتبر أفضل طريقة لحفظ وتثبيت المعلومات الخاصة بال flexbox أو العديد من التنسيقات الموجودة بال css هو استخدام الصور أو التعلم من الصور وكما بالصورة التالية يوضح معظم الخواص الموجودة بال flexbox

كما أن بالإضافة للمصادر السابقة فيوجد موقع css-tricks بحيث يشرح ال flexbox بطريقة رائعة من خلال الصور يمكنك الوصول له من خلال الرابط التالي