ما هو 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.

جرّب بنفسك

<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>