الدرس الثالث عشر: Flexbox في CSS

مقدمة

تُعد خاصية Flexbox (اختصار لـ Flexible Box Layout) من أدوات CSS القوية التي تُستخدم لتصميم تخطيطات مرنة وسهلة في الويب. تم تقديم Flexbox كوسيلة لمعالجة مشكلات التوزيع والمحاذاة في تصميم الواجهات، مما يسمح للمطورين بإنشاء تخطيطات متجاوبة بشكل أسرع وأكثر فعالية. في هذا الدرس، سنستعرض أساسيات Flexbox، بما في ذلك الخصائص الأساسية مثل display: flex، وjustify-content، وalign-items، وسنقدم أمثلة عملية توضح كيفية استخدام Flexbox في التصميم.

1. ما هو Flexbox؟

Flexbox هو نظام تخطيط يُستخدم في CSS لتوزيع العناصر داخل حاوية (Container) بطريقة فعّالة. يسمح Flexbox بتوزيع العناصر بشكل مرن داخل المساحة المتاحة، مما يجعل من السهل تصميم تخطيطات معقدة دون الحاجة إلى استخدام تقنيات تخطيط قديمة مثل القوائم غير المرتبة أو الجداول.

1.1. كيف يعمل Flexbox؟

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

2. الخصائص الأساسية لـ Flexbox

2.1. display: flex

تُستخدم خاصية display: flex; لتحويل عنصر إلى حاوية Flex. هذه الخاصية تحدد أن جميع العناصر الفرعية داخل هذه الحاوية ستُعالج كعناصر Flex، مما يتيح لهم التوزيع بشكل ديناميكي.

مثال عملي

<div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

<style>
.flex-container {
    display: flex;
    background-color: lightgray;
}
.flex-item {
    background-color: lightblue;
    margin: 10px;
    padding: 20px;
}
</style>

2.2. justify-content

تحدد خاصية justify-content كيفية توزيع العناصر في الاتجاه الأفقي داخل حاوية Flex. هناك عدة قيم يمكن استخدامها مع هذه الخاصية:

• flex-start: تحاذي العناصر في بداية الحاوية.
• flex-end: تحاذي العناصر في نهاية الحاوية.
• center: تحاذي العناصر في وسط الحاوية.
• space-between: توزع العناصر بالتساوي، مع وضع المساحة بين العناصر.
• space-around: توزع العناصر بالتساوي، مع إضافة مساحة حولها.

مثال عملي

<div class="flex-container" style="justify-content: center;">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

2.3. align-items

تحدد خاصية align-items كيفية محاذاة العناصر في الاتجاه العمودي داخل حاوية Flex. القيم الشائعة المستخدمة تشمل:

• flex-start: تحاذي العناصر في أعلى الحاوية.
• flex-end: تحاذي العناصر في أسفل الحاوية.
• center: تحاذي العناصر في وسط الحاوية.
• baseline: تحاذي العناصر بناءً على خط الأساس للنص.
• stretch: يجعل العناصر تمتد لتملأ الحاوية عموديًا.

مثال عملي

<div class="flex-container" style="align-items: center;">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

3. أمثلة عملية على استخدام Flexbox

3.1. تخطيط بسيط باستخدام Flexbox

يمكننا استخدام Flexbox لإنشاء تخطيط بسيط للأعمدة. سنقوم بإنشاء تخطيط مكون من ثلاثة أعمدة.

<div class="flex-container" style="justify-content: space-between; align-items: flex-start;">
    <div class="flex-item" style="width: 30%;">Column 1</div>
    <div class="flex-item" style="width: 30%;">Column 2</div>
    <div class="flex-item" style="width: 30%;">Column 3</div>
</div>

<style>
.flex-container {
    display: flex;
    background-color: lightgray;
}
.flex-item {
    background-color: lightblue;
    margin: 10px;
    padding: 20px;
}
</style>

3.2. تخطيط الشبكة باستخدام Flexbox

يمكن استخدام Flexbox لإنشاء تخطيط شبكي بسيط، حيث يتم توزيع العناصر بشكل متساوٍ.

<div class="flex-container" style="flex-wrap: wrap; justify-content: space-around;">
    <div class="flex-item" style="width: 45%;">Item 1</div>
    <div class="flex-item" style="width: 45%;">Item 2</div>
    <div class="flex-item" style="width: 45%;">Item 3</div>
    <div class="flex-item" style="width: 45%;">Item 4</div>
</div>

3.3. عناصر متجاوبة باستخدام Flexbox

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

<div class="flex-container" style="flex-wrap: wrap;">
    <div class="flex-item" style="flex: 1 1 200px;">Item 1</div>
    <div class="flex-item" style="flex: 1 1 200px;">Item 2</div>
    <div class="flex-item" style="flex: 1 1 200px;">Item 3</div>
    <div class="flex-item" style="flex: 1 1 200px;">Item 4</div>
</div>

<style>
.flex-container {
    display: flex;
    background-color: lightgray;
}
.flex-item {
    background-color: lightblue;
    margin: 10px;
    padding: 20px;
}
</style>

4. الخاتمة

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