ما هو Flex Box؟

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

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

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

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

.container {
    display: flex;
}

display: flex;: يحوّل هذا التصريح العنصر المحدد إلى حاوية مرنة، وأبناءه المباشرين إلى عناصر مرنة.
display: inline-flex;: ينشئ حاوية مرنة مضمنة: يتصرف العنصر كعنصر مضمن، لكن أبناءه يصبحون عناصر مرنة تتمتع بإمكانات Flexbox كاملة.

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

flex-direction: يحدّد اتجاه عناصر Flex (row, column, row-reverse, column-reverse).
justify-content: يحاذي عناصر Flex على المحور الرئيسي (مثلًا: 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: يحاذي أسطر المرونة عندما تكون هناك مساحة إضافية على المحور العرضي (على غرار justify-content، ولكن لأسطر متعددة).

التحدي

سهل

لديك مستند HTML يحتوي على عنصر تقسيم (<div>) يتضمن ثلاثة عناصر تقسيم فرعية (<div>). مهمتك هي استخدام الخاصية display: 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>