ما هو Flex Box؟

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

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

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

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

.container {
    display: flex;
}

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

بمجرد أن يصبح لديك حاوية 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. اتبع الخطوات التالية:

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