تعلم أساسيات Flexbox في 10 دقائق فقط

ما هو Flexbox؟

Flexbox ، اختصارًا لـ "المربع المرن" ، هو وضع تخطيط تم تقديمه في CSS3 يحدد كيفية ترتيب العناصر على الصفحة بحيث تتصرف بشكل متوقع في ظل أحجام شاشات وأجهزة مختلفة.

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

  • ضع العناصر في اتجاهات مختلفة
  • إعادة ترتيب عرض العناصر
  • تغيير محاذاة العناصر
  • تناسب العناصر ديناميكيًا في الحاوية

متى لا تستخدم Flexbox؟

بينما يعد Flexbox رائعًا لتوسيع نطاق العناصر ومواءمتها وإعادة ترتيبها ، فحاول تجنب استخدامها من أجل:

  • تخطيط الصفحة العام
  • المواقع التي تدعم المتصفحات القديمة بشكل كامل

المتصفحات القديمة ، مثل IE 11 أو أقل ، لا تدعم Flexbox أو تدعمها جزئيًا. إذا كنت تريد تشغيلها بأمان ، فيجب عليك الرجوع إلى أساليب تخطيط CSS الأخرى ، مثل display: inline-blockwith floatو display: table.

ومع ذلك ، إذا كنت تستهدف المتصفحات الحديثة فقط ، فمن المؤكد أن Flexbox يستحق المشاهدة.

المصطلح

في نموذج Flexbox ، هناك ثلاثة مفاهيم أساسية:

  • العناصر المرنة ، العناصر التي يجب وضعها
  • الحاوية المرنة ، والتي تحتوي على عناصر مرنة
  • اتجاه التدفق ، والذي يحدد اتجاه تخطيط العناصر المرنة

يتعلم البشر بشكل أفضل من التجربة والأمثلة ، فلنبدأ!

المستوى 1 - أساسي

1) إنشاء حاوية مرنة

.flex-container { display: flex;}

لإنشاء حاوية مرنة ، تحتاج فقط إلى إضافة display: flexالخاصية إلى عنصر. بشكل افتراضي ، تعتبر جميع العناصر الفرعية المباشرة عناصر مرنة ويتم وضعها أفقيًا في صف واحد من اليسار إلى اليمين. إذا كان العرض الإجمالي للعناصر المرنة أكبر من الحاوية ، فسيتم تصغير العناصر بحيث تتناسب مع الحاوية.

2) ضع العناصر المرنة في عمود واحد

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

يمكن وضع العناصر المرنة عموديًا عن طريق الضبط flex-direction: column. من الممكن أيضًا وضعها بترتيب عكسي عن طريق الإعداد flex-direction: column-reverseأو flex-direction: row-reverse.

.flex-container { display: flex; flex-direction: column-reverse;}

المستوى 2 - مبتدئ

1) قم بمحاذاة العناصر المرنة إلى اليمين

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

تذكر أن هناك اتجاهًا مرنًا لكل طراز من طرازات Flexbox. justify-contentيستخدم لتحديد مكان وضع العناصر المرنة على طول الاتجاه المرن. في المثال أعلاه ، justify-content: flex-endيعني أن العناصر مبررة حتى نهاية الحاوية المرنة في الاتجاه الأفقي. لهذا السبب يتم وضعهم على اليمين.

2) العناصر المرنة في الوسط

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

3) انشر العناصر المرنة

يمكنك تحديد مقدار المسافة التي يجب أن تظهر بين العناصر في حاوية باستخدام واحدة من ثلاث قيم تباعد محتملة justify-contentللخاصية:

  • space-evenly: المسافة بين حافة البداية للحاوية والعنصر الأول تساوي التباعد بين كل عنصر والعنصر المجاور له.
  • space-between: المسافة بين أي عنصرين متجاورين هي نفسها ، ولكنها لا تساوي بالضرورة المسافة بين العنصر الأول / الأخير وأقرب حافة لها ؛ المسافة بين حافة البداية والعنصر الأول تساوي المسافة بين حافة النهاية والعنصر الأخير.
  • space-around: المساحة الموجودة على كل جانب من عنصر ما هي نفسها لكل عنصر في الحاوية. لاحظ أن هذا يعني أن المسافة بين عنصرين متجاورين ستكون ضعف المسافة بين العنصر الأول / الأخير وأقرب حافة له.

4) قم بمحاذاة العناصر المرنة في الاتجاه الثاني

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

عادة ، نرغب في وضع العناصر على طول الاتجاه المرن مع محاذاة العناصر أيضًا في الاتجاه المتعامد معها. عن طريق الضبط justify-content: centerو align-items: center، يمكن وضع العناصر المرنة في وسط الحاوية المرنة أفقيًا وعموديًا.

5) قم بمحاذاة عنصر فليكس معين

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

من الممكن محاذاة عنصر مرن معين بشكل مختلف عن العناصر الأخرى في الحاوية باستخدام align-selfخاصية CSS على هذا العنصر.

المستوى 3 - متوسط

1) اسمح للعناصر المرنة بالالتفاف في صفوف / أعمدة أخرى

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

بشكل افتراضي ، لا يُسمح للعناصر المرنة بالالتفاف ويتم تغيير حجمها لتناسب صف أو عمود واحد إذا لم تكن الحاوية المرنة كبيرة بما يكفي لجميعهم. من خلال الإضافة flex-wrap: wrap، سيتم لف العناصر المرنة التي من شأنها تجاوز الحاوية في صف آخر.

2) التفاف عكسي

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

لا تزال العناصر المرنة موضوعة في صفوف متعددة flex-wrap: wrap-reverseولكنها تبدأ من نهاية الحاوية المرنة.

3) تبرير موضع سطور العناصر

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

بشكل افتراضي ، يتم تمديد صفوف العناصر المرنة الملتفة لتحتل كل المساحة المتبقية بمسافات متساوية بين الصفوف المجاورة. يمكنك align-contentالضبط على الحاوية المرنة لتحديد موضع الصفوف عند حدوث الالتفاف. القيم الممكنة هي flex-start، flex-end، center، space-between، space-aroundو stretch(الافتراضي).

المستوى 4 - متقدم

1) توسيع العناصر

.flex-container { display: flex;}
.flex-item.nth-of-type(1){ flex-grow: 1;}
.flex-item.nth-of-type(2) { flex-grow: 2;}

flex-growساري المفعول فقط عند وجود مساحة متبقية في الحاوية المرنة. و flex-growخاصية يحدد البند المرن كم ستوسع عنصر نسبة إلى البنود الأخرى من أجل سد خانة المرن. الافتراضي هو 1. عند التعيين على 0 ، لن ينمو العنصر لملء المساحة المتبقية على الإطلاق. في هذا المثال ، نسبة عنصرين هي 1: 2 ، مما يعني أن العنصر الأول سيأخذ ⅓ ، بينما سيأخذ العنصر الثاني ⅔ من المساحة المتبقية.

2) تقليص العناصر

.flex-container { display: flex;}
.flex-item:nth-of-type(1) { flex-shrink: 1;}
.flex-item:nth-of-type(2) { flex-shrink: 2;}

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

3) ضبط حجم العناصر

.flex-container { display: flex;}
.flex-item.nth-of-type(1) { flex-basis: 200px;}
.flex-item.nth-of-type(2) { flex-basis: 10%;}

بدلاً من استخدام الحجم الأولي للعنصر ، يمكنك تخصيص حجمه باستخدام flex-basis. بشكل افتراضي ، قيمته هي flex-basis: auto، مما يعني الحجم المحسوب من قواعد CSS غير Flexbox. يمكنك أيضًا تعيينه على قيمة مطلقة أو قيمة تمثل نسبة مئوية من الحاوية المرنة ؛ على سبيل المثال flex-basis: 200pxو flex-basis: 10%.

4) ضع أساسًا مرنًا ومرنًا ومرنًا ومرنًا معًا

.flex-container { display: flex;}
.flex-item:nth-of-type(1) { flex: 1 0 100px;}
.flex-item:nth-of-type(2) { flex: 2 0 10%;}

flexهو اختصار ل flex-grow، flex-shrinkو flex-basis. في هذا المثال ، تم تعيين العنصر المرن الأول ليكونflex-grow=1، flex-shrink=0،flex-basis=100px ويتم تعيين العنصر المرن الثاني ليكونflex-grow=2، flex-shrink=0،flex-basis=10% . في هذه الحالة ، نظرًا لوجود مساحة متبقية في الحاوية المرنة ، لا flex-growتأخذ سوى التأثيرات flew-shrinkويتم تجاهلها.

استنتاج

Flexbox سهل التعلم والتلاعب. تعتبر معرفة استخدامه مفيدة بشكل خاص لأن دورة تطوير الويب قصيرة والتكرار سريع. إذا كنت ترغب في تجربة المزيد مع Flexbox قبل استخدامه في مشاريعك ، يمكنك زيارة Flexyboxes و Flexbox Froggy للتدرب. يمكنك أيضًا قراءة المزيد عن خدعة CSS: دليل إلى Flexbox و W3C: CSS Flexible Box.

تم نشر هذه المقالة في الأصل على مدونة Altitude Labs وكتبها مهندس البرمجيات لدينا ، فيليكس ياو. Altitude Labs هي وكالة برمجيات متخصصة في تطبيقات React المخصصة للهواتف المحمولة.