26 lines
3.5 KiB
Markdown
26 lines
3.5 KiB
Markdown
|
---
|
|||
|
|
title: Flexbox
|
|||
|
|
localeTitle: حول flexbox
|
|||
|
|
---
|
|||
|
|
## حول flexbox
|
|||
|
|
|
|||
|
|
Flexbox هي طريقة جديدة لتنظيم المحتوى في CSS3. فهو يوفر طريقة رائعة لإنشاء مواقع ويب سريعة الاستجابة تعمل بشكل جيد عبر أحجام مختلفة للشاشة ومحتوى الطلب.
|
|||
|
|
|
|||
|
|
هناك 3 خطوات بسيطة لاستخدام flexbox.
|
|||
|
|
|
|||
|
|
1. قم بتحويل حاوية الأصل إلى حاوية مرنة باستخدام _display: flex؛_ في قسم CSS
|
|||
|
|
2. ضبط ترتيب الحاويات المختلفة باستخدام _الاتجاه المرن_
|
|||
|
|
3. ضبط العناصر الفردية عن طريق استخدام خصائص مثل ضبط - ضبط - محاذاة - عناصر الخ
|
|||
|
|
|
|||
|
|
يهدف Flexbox Layout إلى توفير طريقة أكثر فاعلية لتخطيط ومحاذاة وتوزيع المساحة بين العناصر الموجودة في الحاوية ، حتى عندما يكون حجمها غير معروف و / أو ديناميكيًا (وبالتالي كلمة "flex"). هو إعطاء الحاوية القدرة على تغيير عرض / ارتفاع (وعرض) عناصرها لملء المساحة المتوفرة على أفضل وجه. 
|
|||
|
|
|
|||
|
|
* **المحور الرئيسي** : **المحور** الرئيسي للحاوية المرنة هو المحور الأساسي الذي يتم وضع العناصر المرنة عليه. حذار ، ليس بالضرورة أفقي. يعتمد ذلك على خاصية الاتجاه المرن (انظر أدناه).
|
|||
|
|
* **البداية الرئيسية | نهاية الرئيسية** هي وضع العناصر المرنة داخل حاوية بدءا من الرئيسي بدء والذهاب إلى نهاية الرئيسية.
|
|||
|
|
:* **الحجم الرئيسي** : عرض أو ارتفاع العنصر المرن ، أيهما في البعد الرئيسي ، هو الحجم الرئيسي للعنصر. خاصية الحجم الرئيسي للعنصر المرن هي إما خاصية "العرض" أو "الارتفاع" ، أيهما في البعد الرئيسي.
|
|||
|
|
* **المحور العرضي** : المحور العمودي على المحور الرئيسي يسمى المحور المتقاطع. يعتمد اتجاهها على اتجاه المحور الرئيسي.
|
|||
|
|
* **عبر بداية | نهاية متقاطعة** : يتم تعبئة الخطوط المرن مع العناصر ووضعها في الحاوية بدءاً من الجانب المقابل للبداية من الحاوية المرنة والانتقال إلى الجانب المتقاطع.
|
|||
|
|
* **الحجم المتقاطع** : العرض أو الارتفاع لعنصر مرن ، أيهما في البعد المتقاطع ، هو الحجم المتقاطع للعنصر. الخاصية ذات الحجم المتقاطع هي أيهما "عرض" أو "ارتفاع" في البعد المتبادل.
|
|||
|
|
|
|||
|
|
#### معلومات اكثر:
|
|||
|
|
|
|||
|
|
[هذه مقالة رائعة يمكنك](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/)
|