كيف يعمل Flexbox - شرح بصور متحركة كبيرة وملونة

يعد Flexbox بإنقاذنا من شرور CSS العادي (مثل المحاذاة الرأسية).

حسنًا ، Flexbox يحقق هذا الهدف. لكن إتقان نموذجها العقلي الجديد يمكن أن يمثل تحديًا.

لذلك دعونا نلقي نظرة متحركة على كيفية عمل Flexbox ، حتى نتمكن من استخدامه لبناء تخطيطات أفضل.

المبدأ الأساسي لـ Flexbox هو جعل التخطيطات مرنة وبديهية.

لتحقيق ذلك ، يتيح للحاويات أن تقرر بنفسها كيفية توزيع أطفالها بالتساوي - بما في ذلك حجمها والمسافة بينها.

كل هذا يبدو جيدًا من حيث المبدأ. لكن دعونا نرى كيف يبدو في الممارسة.

في هذه المقالة ، سوف نتعمق في 5 خصائص Flexbox الأكثر شيوعًا. سنستكشف ما يفعلونه ، وكيف يمكنك استخدامه ، وكيف ستبدو نتائجهم في الواقع.

الخاصية رقم 1: العرض: Flex

إليك مثال صفحة الويب الخاصة بنا:

لديك أربعة أقسام ملونة بأحجام مختلفة ، محفوظة داخل حاوية رمادية div. اعتبارًا من الآن ، تخلف كل div على display: block. وهكذا يأخذ كل مربع العرض الكامل لخطه.

لبدء استخدام Flexbox ، تحتاج إلى تحويل الحاوية الخاصة بك إلى حاوية مرنة . هذا سهل مثل:

#container { display: flex;}

لم يتغير الكثير - يتم عرض divs الخاص بك بشكل مضمّن الآن ، ولكن هذا كل ما في الأمر. لكن وراء الكواليس ، فعلت شيئًا قويًا. لقد أعطيت مربعاتك شيئًا يسمى سياق مرن .

يمكنك الآن البدء في وضعها ضمن هذا السياق ، بصعوبة أقل بكثير من CSS التقليدية.

خاصية رقم 2: فليكس دايركشن

وحول flexbox الحاوية محورين: المحور الرئيسي و المحور العرضي ، الذي الافتراضي إلى يبحث مثل هذا:

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

Flex-directionومع ذلك ، دعنا ندير المحور الرئيسي.

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

هناك تمييز مهم يجب القيام به هنا: flex-direction: columnعدم محاذاة المربعات على المحور المتقاطع بدلاً من المحور الرئيسي. يجعل المحور الرئيسي نفسه ينتقل من الأفقي إلى الرأسي.

وهناك زوجين من الخيارات الأخرى لالمرن الاتجاه، وكذلك: الصف العكسي و عمود عكسي.

الخاصية رقم 3: تبرير المحتوى

يتحكم Justify-content في كيفية محاذاة العناصر على المحور الرئيسي.

هنا ، ستغوص أعمق قليلاً في تمييز المحور الرئيسي / المتقاطع. أولاً ، دعنا نعود إلى الاتجاه المرن: الصف.

#container { display: flex; flex-direction: row; justify-content: flex-start;}

لديك خمسة أوامر تحت تصرفك لاستخدام محتوى التبرير :

1. بداية مرنة
2. نهاية مرنة
3. مركز
4. الفضاء بين
5. حول الفضاء

تعتبر المسافة بين المسافات والفراغات هي الأقل سهولة. المسافة بين تعطي مسافة متساوية بين كل مربع ، ولكن ليس بينها وبين الحاوية.

يضع Space-around وسادة مساوية متساوية على جانبي المربع - مما يعني أن المسافة بين المربعات الخارجية والحاوية تساوي نصف المسافة بين مربعين (يساهم كل مربع بكمية متساوية غير متداخلة من الهامش ، وبالتالي مضاعفة المساحة).

ملاحظة أخيرة: تذكر أن محتوى الضبط يعمل على طول المحور الرئيسي ، وأن الاتجاه المرن يبدل المحور الرئيسي . سيكون هذا مهمًا عندما تنتقل إلى ...

الخاصية رقم 4: محاذاة العناصر

إذا حصلت على justify-content ، فستكون محاذاة العناصر في غاية السهولة.

نظرًا لأن محتوى الضبط يعمل على طول المحور الرئيسي ، يتم تطبيق محاذاة العناصر على المحور المتقاطع.

دعنا نعيد ضبط الاتجاه المرن إلى الصف ، بحيث تبدو محاورنا مماثلة للصورة أعلاه.

بعد ذلك ، دعنا نتعمق في أوامر محاذاة العناصر.

1. بداية مرنة
2. نهاية مرنة
3. مركز
4. تمتد
5. حدود

الثلاثة الأولى هي بالضبط نفس المحتوى المبرر ، لذلك لا يوجد شيء رائع هنا.

ومع ذلك ، فإن الاثنين التاليين مختلفان بعض الشيء.

لديك امتداد ، حيث تشغل العناصر كامل المحور العرضي ، والخط الأساسي ، حيث تتم محاذاة الجزء السفلي من علامات الفقرة.

(لاحظ أنه بالنسبة لـ align-items: stretch، اضطررت إلى تعيين ارتفاع المربعات على تلقائي. وإلا فإن خاصية الارتفاع ستتجاوز الامتداد.)

بالنسبة للخط الأساسي ، اعلم أنه إذا قمت بإزالة علامات الفقرة ، فإنها تحاذي الجزء السفلي من المربعات بدلاً من ذلك ، مثل:

لتوضيح المحاور الرئيسية والمتقاطعة بشكل أفضل ، دعنا نجمع بين المحتوى المبرر وعناصر المحاذاة ونرى كيف يعمل التمركز بشكل مختلف لأمري الاتجاه المرن:

مع الصف ، يتم إعداد المربعات على طول المحور الرئيسي الأفقي. مع العمود ، تقع على طول المحور الرئيسي الرأسي.

حتى إذا تم توسيط المربعات عموديًا وأفقيًا في كلتا الحالتين ، فلا يمكن استبدالهما!

الخاصية رقم 5: محاذاة ذاتي

يسمح لك Align-self بمعالجة محاذاة عنصر معين يدويًا.

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

#container { align-items: flex-start;}

.square#one { align-self: center;}// Only this square will be centered.

دعونا نرى كيف يبدو هذا. سوف تقوم بتطبيق محاذاة ذاتية على مربعين ، وبالنسبة للباقي يتم تطبيق align-items: centerو flex-direction: row.

استنتاج

على الرغم من أننا خدشنا للتو سطح Flexbox ، يجب أن تكون هذه الأوامر كافية لك للتعامل مع معظم المحاذاة الأساسية - وللمحاذاة رأسياً لمحتوى قلبك.

إذا كنت ترغب في مشاهدة المزيد من دروس GIF Flexbox التعليمية ، أو إذا كان هذا البرنامج التعليمي مفيدًا لك ، فاضغط على القلب الأخضر أدناه أو اترك تعليقًا.

شكرا للقراءة!