CSS Flexbox # 1. إنشاء أول تخطيط Flexbox الخاص بك

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

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

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

خلال الأسابيع القليلة القادمة ، سننشر سلسلة من دروس Flexbox أثناء كتابة "شرح Flexbox". يوضح هذا البرنامج التعليمي الأول المفاهيم الأساسية لـ CSS Flexbox مع أمثلة عملية.

مقدمة إلى Flexbox

تصف مواصفات CSS Flexbox تخطيطًا يحتوي على عناصر (عناصر flex-items ) داخل حاوية (حاوية flex-container ). يمكن أن تنمو هذه العناصر أو تتقلص في العرض و / أو الارتفاع ، وفقًا لمساحة الحاوية المتاحة. العناصر "مرنة" لتناسب الحاوية الرئيسية بأفضل طريقة ممكنة.

يمكن وضع هذه العناصر "المرنة" في أي اتجاه (محور مضمن أو محور كتلة) ، مما يوفر قدرًا كبيرًا من المرونة عند تغيير حجم (عرض أو ارتفاع) الشاشة أو اتجاهها.

يمكنك إلقاء نظرة على مواصفات Flexbox W3C بالنقر فوق هذا الارتباط.

الخطوة 1. قم بإنشاء HTML

لنبدأ هذا المثال بإنشاء ملف HTML مع بعض التعليمات البرمجية. لقد أعددت بعض HTML من أجلك - إنها حاوية بها 3 عناصر فرعية.

• افتح محرر الكود المفضل لديك.
• قم بإنشاء ملف HTML فارغ.
• قم بزيارة هذه الصفحة وانسخ كود HTML
• الصق هذا الرمز في ملف HTML الخاص بك.

الخطوة 2. قم بإنشاء CSS

الآن بعد أن أصبح لدينا حاوية بها 3 عناصر ، دعنا نضيف بعض التصميم.

• قم بإنشاء ملف CSS يسمى style.css. . ضع هذا الملف في نفس المجلد مثل ملف HTML الخاص بك. الارتباط إلى ملف CSS هذا موجود بالفعل في علامة ملف HTML الخاص بك
• انسخ والصق هذا الرمز المتاح أيضًا في Codepen:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

توضح هذه الصورة كيف ستظهر التعليمات البرمجية الخاصة بك عند فتح ملف HTML في المستعرض. العناصر الثلاثة الفرعية بعرض الحاوية الأصلية الخاصة بهم. يتم تحديد الارتفاع من خلال محتوى كل عنصر. لاحظ مساحة 2rem (حوالي 32 بكسل على شاشة سطح المكتب) من جميع الجوانب.

الخطوه 3. أنماط CSS Flexbox

حان الوقت الآن لبدء جزء Flexbox من هذا البرنامج التعليمي.

• قم بتحرير ملف CSS وأضف هذا الرمز:

 .container { display: flex; }

توضح هذه الصورة كيف سيبدو الرمز الخاص بك الآن:

ما الذي تغير؟ من الناحية الفنية ، الحاوية الرئيسية هي الآن flex-container . تحولت العناصر الفرعية إلى عناصر flex-items .

لماذا تغير حجم الحاويات؟ العناصر المرنة ليست بعرض الحاوية الأصلية الخاصة بهم. هم الآن واسعون مثل المحتوى الموجود بداخلهم. تظهر flex-items كعناصر عائمة إلى اليسار. يتصرفون مثل العناصر المضمنة .

لرؤية عرض الحاوية الرئيسية بوضوح ، يمكنك تطبيق background-color :

• قم بتحرير كود CSS وأضف هذا الرمز:

 .container { display: flex; background-color: #f5ca3c; }

إليك كيف تظهر الحاوية الآن:

لقد لاحظت بالفعل أن flex-container تتصرف (في الغالب) كعنصر على مستوى الكتلة. ومع ذلك ، فنحن أيضًا نجعل الحاوية تتصرف كعنصر مستوى مضمن. للقيام بذلك ، نقوم بتغيير قيمة خاصية display إلى inline-flex .

• قم بتحرير كود CSS:

 .container { display: inline-flex; background-color: #f5ca3c;

الحاوية المرنة هي الآن عنصر مستوى مضمّن ، كما ترى في هذه الصورة:

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

• قم بتحرير كود CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

الخطوة رقم 4. تغيير صفوف Flexbox إلى أعمدة

حتى الآن ، قمنا بإنشاء flex-container . لقد رأينا أيضًا كيف يتصرف أطفال هذه الحاوية عند تحويلها إلى flex-items .

الآن دعنا نتعلم كيفية تغيير اتجاه تخطيطنا. الاتجاه الافتراضي flex-container يعتمد على الصفوف. ومع ذلك ، يمكنك تغيير هذا السلوك باستخدام خاصية flex-direction .

• قم بتحرير كود CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

بعد تحديث الكود الخاص بك ، لن ترى أي تغيير لأن flex-direction: row هي القيمة الافتراضية. دعونا نجري تغييرًا واضحًا حقًا: قم بتحرير اتجاه flex-container إلى column .

• قم بتحرير كود CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

تُظهر هذه الصورة التالية التغيير في التخطيط الخاص بك:

الآن يعتمد اتجاه flex-container على محور الكتلة (العمود). تتم محاذاة flex-items من أعلى إلى أسفل ويأخذ كل عنصر من هذه العناصر العرض الكامل للحاوية الأصلية الخاصة به. لذلك ، يتصرفون مثل عناصر الكتلة.

الآن ، يمكنك البدء في طرح الأسئلة حول الأشياء في هذه المرحلة: " مرحبًا ، يبدو تخطيطي الآن مطابقًا تمامًا للتخطيط الأول في هذا البرنامج التعليمي! " هذا صحيح. بصريًا ، لا يوجد فرق بين هذا التخطيط الحالي مع flex-container والتخطيط الأول لهذا المثال مع حاوية كتلة.

ومع ذلك ، لدينا الآن المزيد من السيطرة. على سبيل المثال ، يمكنك عكس اتجاه flex-items بخصائص عكس row-reverse column-reverse .

• قم بتحرير كود CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

تُظهر هذه الصورة كيف سيبدو التخطيط الخاص بك بعد هذا التحديث الجديد:

لمشاهدة flex-items معكوسة في صف ، قم بتغيير قيمة خاصية flex-direction .

• قم بتحرير كود CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

ملخص Flexbox

تهانينا! لقد تعلمت كيفية الإعلان عن flex-container . لقد رأيت كيف تتصرف flex-items اعتمادًا على flex-direction المطبق على الحاوية الأصلية ( row أو column ). كما أنك تعرف كيفية عكس ترتيب flex-items .

يتم إجراء كل هذه التغييرات باستخدام CSS ، لذلك لن تؤثر على بنية ترميز HTML لموقعك. هذه إحدى مزايا استخدام Flexbox. يعد عكس ترتيب flex-items إحدى ميزات وحدة CSS هذه. هناك الكثير لتتعلمه عن Flexbox ، لذا ابحث عن الجزء رقم 2 من هذا البرنامج التعليمي في غضون أيام قليلة.

المزيد من الدروس لهذه السلسلة

• CSS Flexbox # 2. كيفية استخدام خاصية justify-content
• CSS Flexbox # 3. خاصية محاذاة العناصر
• CSS Flexbox # 4. الملكية المرنة