---
title: Flexbox
localeTitle: حول flexbox
---
## حول flexbox

Flexbox هي طريقة جديدة لتنظيم المحتوى في CSS3. فهو يوفر طريقة رائعة لإنشاء مواقع ويب سريعة الاستجابة تعمل بشكل جيد عبر أحجام مختلفة للشاشة ومحتوى الطلب.

هناك 3 خطوات بسيطة لاستخدام flexbox.

1.  قم بتحويل حاوية الأصل إلى حاوية مرنة باستخدام _display: flex؛_ في قسم CSS
2.  ضبط ترتيب الحاويات المختلفة باستخدام _الاتجاه المرن_
3.  ضبط العناصر الفردية عن طريق استخدام خصائص مثل ضبط - ضبط - محاذاة - عناصر الخ

يهدف Flexbox Layout إلى توفير طريقة أكثر فاعلية لتخطيط ومحاذاة وتوزيع المساحة بين العناصر الموجودة في الحاوية ، حتى عندما يكون حجمها غير معروف و / أو ديناميكيًا (وبالتالي كلمة "flex"). هو إعطاء الحاوية القدرة على تغيير عرض / ارتفاع (وعرض) عناصرها لملء المساحة المتوفرة على أفضل وجه. ![flexUsage](https://cdn.css-tricks.com/wp-content/uploads/2011/08/flexbox.png)

*   **المحور الرئيسي** : **المحور** الرئيسي للحاوية المرنة هو المحور الأساسي الذي يتم وضع العناصر المرنة عليه. حذار ، ليس بالضرورة أفقي. يعتمد ذلك على خاصية الاتجاه المرن (انظر أدناه).
*   **البداية الرئيسية | نهاية الرئيسية** هي وضع العناصر المرنة داخل حاوية بدءا من الرئيسي بدء والذهاب إلى نهاية الرئيسية.
:*   **الحجم الرئيسي** : عرض أو ارتفاع العنصر المرن ، أيهما في البعد الرئيسي ، هو الحجم الرئيسي للعنصر. خاصية الحجم الرئيسي للعنصر المرن هي إما خاصية "العرض" أو "الارتفاع" ، أيهما في البعد الرئيسي.
*   **المحور العرضي** : المحور العمودي على المحور الرئيسي يسمى المحور المتقاطع. يعتمد اتجاهها على اتجاه المحور الرئيسي.
*   **عبر بداية | نهاية متقاطعة** : يتم تعبئة الخطوط المرن مع العناصر ووضعها في الحاوية بدءاً من الجانب المقابل للبداية من الحاوية المرنة والانتقال إلى الجانب المتقاطع.
*   **الحجم المتقاطع** : العرض أو الارتفاع لعنصر مرن ، أيهما في البعد المتقاطع ، هو الحجم المتقاطع للعنصر. الخاصية ذات الحجم المتقاطع هي أيهما "عرض" أو "ارتفاع" في البعد المتبادل.

#### معلومات اكثر:

[هذه مقالة رائعة يمكنك](https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35) قراءتها لفهم المزيد حول flexbox هذا هو دليل عملي موصى به للغاية يوضح خصائص المرن المختلفة المطبقة على الحاوية المرنة والعناصر المرنة التالية: [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)