3.0 KiB
| title | localeTitle |
|---|---|
| CSS3 Flexible Box | CSS3 صندوق مرن |
CSS3 صندوق مرن
يوفر نموذج Flexbox طريقة فعالة لتخطيط ومحاذاة وتوزيع المساحة بين العناصر داخل المستند - حتى عندما يكون إطار العرض وحجم عناصرك ديناميكية أو غير معروفة.
تتمثل أهم فكرة وراء نموذج Flexbox في أن الحاوية الرئيسية يمكنها تغيير عرض / ارتفاع / ترتيب العناصر الخاصة بها لملء المساحة المتوفرة على أفضل وجه. تقوم حاوية مرنة بتوسيع العناصر لملء المساحة المتوفرة ، أو تقليصها لمنع تجاوز السعة. 1
الاستخدام الأساسي
يمكن استخدام Flexbox لتركيز أي مقدار من العناصر المحددة داخل عنصر واحد. المثال الأساسي لهذا هو الرمز التالي:
css .center-elements-inside { display: flex; flex-direction: row; justify-content: center; }
دعونا كسر هذا المثال. أولاً قمنا بتعيين خاصية العرض إلى "flex" حتى نتمكن من تطبيق خصائص flexbox الخاصة بنا. بعد ذلك نعلن الطريقة التي يتعامل بها flexbox مع عناصرنا. هذا يمكن أن يكون في صف أو في عمود. سيؤدي تعيينه إلى الصف إلى محاذاة العناصر الأفقية داخل العنصر. العمود سوف محاذاة لهم العمودي.
الآن دعونا نلقي نظرة سريعة على "تبرير المحتوى". تعلن هذه الخاصية كيف يتم توزيع العناصر داخل العنصر الرئيسي. لقد اخترنا قيمة "المركز". هذا يعني أن جميع العناصر الموجودة داخل هذا العنصر سيتم توسيطها.
معلومات اكثر:
للحصول على فهم كامل لـ Flexbox ، اقرأ استيعاب Flexbox كل ما تحتاج إلى معرفته على صفحة MediumCodeCamp المتوسطة.
للحصول على دليل تفاعلي ، يمكنك الانتقال إلى الدليل النهائي لـ Flexbox - Learning Through Examples
كلاهما موارد كبيرة من قبل Ohans Emmanuel.
يمكن العثور على دليل مرئي رائع آخر متعمق ولكنه سهل المتابعة في دليل إلى Flexbox بواسطة CSS-Tricks