CSS: Flexbox من البداية

Flexbox، أو “الصندوق المرن”، هو نظام تخطيط في CSS يهدف إلى تحسين توزيع العناصر داخل الحاوية، حتى تتمكن من التعامل مع المساحات الديناميكية والمعقدة بكل سهولة. تم تقديم Flexbox كجزء من CSS3، وهو يوفر حلاً مرنًا وفعالًا لترتيب العناصر في اتجاه واحد – سواء كان ذلك في صف أو عمود.

مفاهيم أساسية في Flexbox

لفهم Flexbox، يجب أن نتعرف على بعض المفاهيم الأساسية. في Flexbox، الحاوية التي تحتوي على العناصر تُعرف بـ “الأب المرن” (flex container)، والعناصر الموجودة بداخلها تُعرف بـ “الأبناء المرنين” (flex items). يتم التحكم في تخطيط الأبناء المرنين بواسطة خصائص الأب المرن، مما يسمح بترتيب العناصر بشكل مرن حسب الحاجة.

خاصية العرض (display) في Flexbox تُستخدم لتحويل عنصر إلى حاوية مرنة. يمكنك القيام بذلك عن طريق تعيين قيمة الخاصية إلى “flex” أو “inline-flex”. بمجرد أن يكون لديك حاوية مرنة، يمكنك استخدام العديد من الخصائص الأخرى لتحديد كيفية توزيع العناصر داخلها.

خصائص Flexbox الأساسية

هناك العديد من الخصائص في Flexbox التي تمنحك السيطرة الكاملة على تخطيط العناصر. إليك بعض الخصائص الأساسية:

• flex-direction: تحدد اتجاه العناصر داخل الحاوية المرنة. يمكن أن تكون القيم “row” للترتيب الأفقي أو “column” للترتيب العمودي.
• justify-content: تتحكم في محاذاة العناصر الرئيسية داخل الحاوية. يمكن أن تكون القيم مثل “flex-start” أو “flex-end” أو “center”.
• align-items: تتحكم في محاذاة العناصر بشكل عمودي داخل الحاوية. القيم تشمل “stretch” و “center”.
• flex-wrap: تحدد إذا ما كان يجب على العناصر أن تلتف إلى سطر جديد عند الحاجة.

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

أمثلة توضيحية

لنفترض أننا نريد إنشاء تخطيط باستخدام Flexbox يتضمن ثلاثة عناصر مرتبة أفقياً. إليك مثال يوضح كيفية القيام بذلك:

<div style=\"flex-direction: row;justify-content: space-between;align-items: center\">
    <div style=\"background-color: red;width: 100px;height: 100px\">العنصر 1</div>
    <div style=\"background-color: blue;width: 100px;height: 100px\">العنصر 2</div>
    <div style=\"background-color: green;width: 100px;height: 100px\">العنصر 3</div>
</div>

في المثال أعلاه، قمنا بتحديد الحاوية بشكل مرن باستخدام “display: flex”، وجعلنا العناصر مرتبة أفقياً بواسطة “flex-direction: row”. باستخدام “justify-content: space-between”، تم توزيع المساحة بشكل متساوٍ بين العناصر.

مثال آخر يوضح كيفية ترتيب العناصر عمودياً باستخدام Flexbox:

<div style=\"flex-direction: column;align-items: center\">
    <div style=\"background-color: red;width: 100px;height: 100px\">العنصر 1</div>
    <div style=\"background-color: blue;width: 100px;height: 100px\">العنصر 2</div>
    <div style=\"background-color: green;width: 100px;height: 100px\">العنصر 3</div>
</div>

في هذا المثال، قمنا باستخدام “flex-direction: column” لترتيب العناصر بشكل عمودي، مع محاذاة العناصر في وسط الحاوية باستخدام “align-items: center”.