3.5 KiB
3.5 KiB
title | localeTitle |
---|---|
Flexbox | حول flexbox |
حول flexbox
Flexbox هي طريقة جديدة لتنظيم المحتوى في CSS3. فهو يوفر طريقة رائعة لإنشاء مواقع ويب سريعة الاستجابة تعمل بشكل جيد عبر أحجام مختلفة للشاشة ومحتوى الطلب.
هناك 3 خطوات بسيطة لاستخدام flexbox.
- قم بتحويل حاوية الأصل إلى حاوية مرنة باستخدام display: flex؛ في قسم CSS
- ضبط ترتيب الحاويات المختلفة باستخدام الاتجاه المرن
- ضبط العناصر الفردية عن طريق استخدام خصائص مثل ضبط - ضبط - محاذاة - عناصر الخ
يهدف Flexbox Layout إلى توفير طريقة أكثر فاعلية لتخطيط ومحاذاة وتوزيع المساحة بين العناصر الموجودة في الحاوية ، حتى عندما يكون حجمها غير معروف و / أو ديناميكيًا (وبالتالي كلمة "flex"). هو إعطاء الحاوية القدرة على تغيير عرض / ارتفاع (وعرض) عناصرها لملء المساحة المتوفرة على أفضل وجه.
- المحور الرئيسي : المحور الرئيسي للحاوية المرنة هو المحور الأساسي الذي يتم وضع العناصر المرنة عليه. حذار ، ليس بالضرورة أفقي. يعتمد ذلك على خاصية الاتجاه المرن (انظر أدناه).
- البداية الرئيسية | نهاية الرئيسية هي وضع العناصر المرنة داخل حاوية بدءا من الرئيسي بدء والذهاب إلى نهاية الرئيسية. :* الحجم الرئيسي : عرض أو ارتفاع العنصر المرن ، أيهما في البعد الرئيسي ، هو الحجم الرئيسي للعنصر. خاصية الحجم الرئيسي للعنصر المرن هي إما خاصية "العرض" أو "الارتفاع" ، أيهما في البعد الرئيسي.
- المحور العرضي : المحور العمودي على المحور الرئيسي يسمى المحور المتقاطع. يعتمد اتجاهها على اتجاه المحور الرئيسي.
- عبر بداية | نهاية متقاطعة : يتم تعبئة الخطوط المرن مع العناصر ووضعها في الحاوية بدءاً من الجانب المقابل للبداية من الحاوية المرنة والانتقال إلى الجانب المتقاطع.
- الحجم المتقاطع : العرض أو الارتفاع لعنصر مرن ، أيهما في البعد المتقاطع ، هو الحجم المتقاطع للعنصر. الخاصية ذات الحجم المتقاطع هي أيهما "عرض" أو "ارتفاع" في البعد المتبادل.
معلومات اكثر:
هذه مقالة رائعة يمكنك قراءتها لفهم المزيد حول flexbox هذا هو دليل عملي موصى به للغاية يوضح خصائص المرن المختلفة المطبقة على الحاوية المرنة والعناصر المرنة التالية: https://css-tricks.com/snippets/css/a-guide-to-flexbox/