ما هو Flex Box؟

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 44 من 76.

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

لاستخدام Flexbox، تحتاج أولاً إلى تحديد حاوية مرنة (flex container). يتم ذلك عن طريق تعيين الخاصية display للعنصر إلى flex أو inline-flex. بمجرد إنشاء حاوية مرنة، تصبح العناصر الأبناء المباشرة لها تلقائياً عناصر مرنة (flex items).

إليك الصيغة الأساسية لإنشاء حاوية مرنة (flex container):

.container {
    display: flex;
}

display: flex;: يقوم هذا التصريح بتحويل العنصر المحدد إلى حاوية مرنة (flex container) وعناصره التابعة المباشرة إلى عناصر مرنة (flex items).

بمجرد أن يكون لديك حاوية flex، يمكنك استخدام خصائص Flexbox المتنوعة للتحكم في تخطيط عناصر الـ flex الخاصة بها. تتضمن بعض الخصائص الأكثر استخدامًا ما يلي:

flex-direction: يحدد اتجاه عناصر الـ flex (row، column، row-reverse، column-reverse).
justify-content: يحاذي عناصر الـ flex على طول المحور الرئيسي (على سبيل المثال، flex-start، flex-end، center، space-between، space-around).

align-items: يقوم بمحاذاة عناصر flex على طول المحور المتقاطع (على سبيل المثال، flex-start، flex-end، center، baseline، stretch).
flex-wrap: يتحكم في ما إذا كان يجب أن تلتف عناصر flex على أسطر متعددة (wrap، nowrap، wrap-reverse).
align-content: يقوم بمحاذاة خطوط flex عندما تكون هناك مساحة إضافية في المحور المتقاطع (مشابه لـ justify-content ولكن للأسطر المتعددة).

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على قسم (<div>) يضم ثلاثة أقسام فرعية (<div>). مهمتك هي استخدام خاصية display: flex; لتحويل القسم الأب إلى حاوية مرنة (flex container). اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <div> الذي يمتلك الفئة container.
قم بتعيين خاصية display لعنصر .container لتكون flex.

ورقة مرجعية

لإنشاء حاوية مرنة (flex container)، اضبط خاصية display على flex:

.container {
    display: flex;
}

يؤدي هذا إلى تحويل العنصر إلى حاوية مرنة (flex container) وأبنائه المباشرين إلى عناصر مرنة (flex items).

خصائص Flexbox الشائعة للتحكم في التخطيط:

flex-direction: اتجاه العناصر المرنة (row، column، row-reverse، column-reverse)
justify-content: محاذاة العناصر على طول المحور الرئيسي (flex-start، flex-end، center، space-between، space-around)
align-items: محاذاة العناصر على طول المحور المتقاطع (flex-start، flex-end، center، baseline، stretch)
flex-wrap: يتحكم في الالتفاف (wrap، nowrap، wrap-reverse)
align-content: محاذاة خطوط العناصر المرنة عندما تكون هناك مساحة إضافية في المحور المتقاطع

جرّب بنفسك

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>