المحاضرة 14: Flexbox – الطريقة الحديثة لمحاذاة وتوزيع المساحة

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

1. ما هو فليكس بوكس؟

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

فكر في Flexbox كصندوق أدوات لإنشاء تخطيطات يمكن تمديدها أو تقليصها أو محاذاتها اعتمادًا على المساحة المتوفرة.

2. السحر يبدأ بالعرض: مرن

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

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
}

الآن، جميع العناصر الموجودة داخل حاوية .flex هي عناصر مرنة ويمكن التعامل معها بسهولة.

3. الاتجاه المرن – ما هو الطريق الذي يجب أن نسلكه؟

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

• صف: محاذاة العناصر في صف أفقي (هذا هو الإعداد الافتراضي).
• العمود: تجميع العناصر في عمود عمودي.
• عكس الصف: مثل الصف، ولكن يتم عكس ترتيب العناصر.
• عمود معكوس: مثل العمود، ولكن يتم تكديس العناصر بترتيب عكسي.

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

الآن، سيتم تكديس العناصر عموديًا!

4. تبرير المحتوى – نشر الأشياء

لنفترض أن لديك ثلاثة عناصر، وتريد توزيعها بالتساوي في الحاوية الخاصة بك. هذا هو المكان الذي يكون فيه justify-content مفيدًا.

• البدء المرن: تتم محاذاة العناصر إلى بداية الحاوية (افتراضي).
• المركز: يتم توسيط العناصر.
• مسافة بين: العناصر متباعدة بالتساوي، مع العنصر الأول في البداية والعنصر الأخير في النهاية.
• مسافة حول: يتم تباعد العناصر بمساحة متساوية حول كل عنصر.

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

الآن، سيتم توزيع العناصر بالتساوي داخل الحاوية.

5. محاذاة العناصر – السحر العمودي

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

• تمدد: العناصر تمتد لملء الحاوية (افتراضي).
• البدء المرن: تتم محاذاة العناصر إلى الأعلى.
• نهاية مرنة: تتم محاذاة العناصر إلى الأسفل.
• المركز: يتم توسيط العناصر عموديًا.

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

الآن، سيتم توسيط كافة العناصر عموديًا داخل الحاوية.

6. Flex-Grow، وFlex-Shrink، وFlex-Basis – الضبط الدقيق للعناصر المرنة

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

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

مثال:

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

يضمن هذا أن يبدأ العنصر عند 100 بكسل، ولكن يمكن أن ينمو لملء مساحة إضافية إذا لزم الأمر، دون تقليص.

7. مثال عملي لـ Flexbox

دعونا نجمع كل هذا معًا بمثال!

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    flex-grow: 1;
}

في هذا المثال:

• يتم ترتيب العناصر على التوالي.
• يتم توزيعها بشكل متساوٍ مع ضبط المحتوى: مسافة حولها.
• تتمركز كافة العناصر عموديًا في الحاوية مع عناصر المحاذاة: center.
• ينمو كل عنصر لملء المساحة المتاحة بالتساوي، وذلك بفضل النمو المرن: 1.

8. لماذا فليكس بوكس ​​روكس

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

الوجبات السريعة الرئيسية:

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

تابعني على LinkedIn-

ريدوي حسن