ما هو Flex Box؟

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

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

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

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

.container {
    display: flex;
}

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

بمجرد أن يصبح لديك حاوية مرنة، يمكنك استخدام خصائص 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 على المحور المتقاطع (مثلًا: flex-start وflex-end وcenter وbaseline وstretch).
flex-wrap: يتحكم فيما إذا كان ينبغي لعناصر flex الالتفاف إلى أسطر متعددة (wrap وnowrap وwrap-reverse).
align-content: يحاذي أسطر flex عندما تكون هناك مساحة إضافية على المحور المتقاطع (يشبه 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>