ما هو Flex Box؟

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

في CSS، يُعدّ تخطيط Flexbox أداة قوية توفّر طريقة فعّالة لإجراء align وتوزيع المساحة بين items داخل container. باستخدام Flexbox، يمكنك التحكم في alignment وdirection وترتيب العناصر وحجمها داخل container، وإنشاء تخطيطات مرنة وديناميكية تتكيف مع أحجام الشاشات والأجهزة المختلفة.

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

إليك الصياغة الأساسية لإنشاء حاوية flex:

.container {
    display: flex;
}

display: flex;: يحوّل هذا التصريح العنصر المحدد إلى حاوية flex وأبناءه المباشرين إلى عناصر flex.

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

flex-direction: يحدد 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. اتبع الخطوات التالية:

اكتب قاعدة 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>