تعلم CSS Flexbox في 5 دقائق - برنامج تعليمي للمبتدئين

مقدمة سريعة لوحدة التخطيط الشائعة

في هذا المنشور ، ستتعلم أساسيات CSS Flexbox ، والتي أصبحت مهارة لا غنى عنها لمطوري الويب والمصممين في العامين الماضيين.

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

لقد أنشأت أيضًا دورة تدريبية مجانية من 12 جزءًا على Flexbox. تحقق من ذلك هنا إذا كنت مهتمًا!

لنبدأ الآن!

أول تخطيط Flexbox الخاص بك

المكونين الرئيسيين للتخطيط حول flexbox هي الحاويات و المواد .

إليك HTML لمثالنا ، والذي يحتوي على حاوية بها ثلاثة عناصر:

 Home Search Logout 

قبل أن نحول هذا إلى تخطيط Flexbox ، سيتم تكديس العناصر فوق بعضها البعض كما يلي:

لقد أضفت القليل من التصميم ، لكن هذا لا علاقة له بـ Flexbox.

لقد أضفت القليل من التصميم ، لكن هذا لا علاقة له بـ Flexbox.

لتحويل هذا إلى تخطيط Flexbox ، سنمنح الحاوية خاصية CSS التالية:

.container { display: flex; } 

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

إذا كنت تريد التحقق من الكود الفعلي ، يمكنك التوجه إلى ملعب Scrimba هذا.

الآن دعونا نتبادل هذه العناصر بشكل عشوائي.

ضبط المحتوى ومحاذاة العناصر

Justify-content و align-items هما خاصيتان CSS تساعداننا في توزيع العناصر في الحاوية. انهم يسيطرون كيف يتم وضع العناصر على طول المحور الرئيسي و المحور العرضي .

في حالتنا (ولكن ليس دائمًا) يكون المحور الرئيسي أفقيًا والمحور المتقاطع عمودي:

في هذه المقالة ، سنلقي نظرة فقط على justify-content، حيث وجدت أن استخدام هذا أكثر من align-items. ومع ذلك ، في دورة Flexbox الخاصة بي ، أشرح كلا الخاصيتين بالتفصيل.

دعنا نركز جميع العناصر على طول المحور الرئيسي باستخدام justify-content:

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

أو يمكننا ضبطه على space-between، مما سيضيف مسافة بين العناصر ، مثل هذا:

.container { display: flex; justify-content: space-between; } 

فيما يلي القيم التي يمكنك تعيينها justify-content:

  • بداية مرنة ( افتراضي )
  • نهاية مرنة
  • مركز
  • الفضاء بين
  • حول الفضاء
  • الفضاء بالتساوي

أنصحك باللعب بهذه الأشياء ومعرفة كيفية لعبها على الصفحة. يجب أن يمنحك ذلك فهمًا صحيحًا للمفهوم.

السيطرة على عنصر واحد

يمكننا أيضًا التحكم في العناصر الفردية . لنفترض ، على سبيل المثال ، أننا نريد الاحتفاظ بالعنصرين الأولين على الجانب الأيسر ، لكن حرك logoutالزر إلى الجانب الأيمن.

للقيام بذلك ، سنستخدم الأسلوب القديم الجيد لتحديد الهامش auto.

.logout { margin-left: auto; } 

إذا كنا نريد دفع كل من searchالعنصر logoutوالعنصر إلى الجانب الأيمن ، فسنضيف ببساطة العنصر margin-leftإلى searchالعنصر بدلاً من ذلك.

.search { margin-left: auto; } 

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

خاصية المرن

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

سنستهدف ببساطة جميع العناصر ونمنحها flexقيمة 1.

.container > div { flex: 1; } 

كما ترى ، فإنه يمد العناصر لملء الحاوية بأكملها.

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

.search { flex: 1; } 

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

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

الآن بعد أن تعلمت الأساسيات ، ستكون جاهزًا بالتأكيد لأخذ الدورة التدريبية الكاملة الخاصة بي وتصبح أستاذًا في Flexbox!

شكرا للقراءة! اسمي بير بورجن ، أنا المؤسس المشارك لـ Scrimba - أسهل طريقة لتعلم البرمجة. يجب عليك التحقق من المعسكر التدريبي لتصميم الويب سريع الاستجابة إذا كنت تريد تعلم كيفية إنشاء موقع ويب حديث على مستوى احترافي.