طريقة الاستخدام
- اكتب اسم الفئة للحاوية، مثل toolbar. تستعمله CSS كمحدد فئة.
- اختر flex-direction وflex-wrap وقيم المحاذاة. يعرض كل منها قيمته الابتدائية أولاً.
- اضبط عدد العناصر (من 1 إلى 12)، ثم flex-grow وflex-shrink وflex-basis لكل عنصر.
- راجع المعاينة، ثم انسخ CSS إلى ملف الأنماط، وضع الفئة على الحاوية.
خصائص الحاوية
ترتّب وحدة تخطيط الصندوق المرن في CSS (باللغة الإنجليزية) العناصر الأبناء داخل حاوية flex على محور رئيسي. تختار flex-direction المحور، وتحدد flex-wrap هل يمكن للعناصر أن تنتقل إلى سطر جديد. وتوزّع justify-content العناصر على المحور الرئيسي، وتضعها align-items وalign-content على المحور المتعامد معه.
- تبدأ flex-direction بالقيمة row، وتقبل row-reverse وcolumn وcolumn-reverse.
- تبدأ flex-wrap بالقيمة nowrap، وتقبل wrap وwrap-reverse أيضاً.
- تبدأ justify-content بالقيمة flex-start، وتبدأ align-items وalign-content بالقيمة stretch.
خصائص العنصر
كل ابن للحاوية عنصر، وخصائص flex الثلاث فيه تحدد نصيبه من المساحة. تبدأ flex-grow بالقيمة 0، وتأخذ المساحة الفائضة بنسبة معامل العنصر. وتبدأ flex-shrink بالقيمة 1، وتبيّن مقدار ما يتنازل عنه العنصر حين تقل المساحة. وتبدأ flex-basis بالقيمة auto، أي الحجم الذي للعنصر، ويحدد الطول أو النسبة المئوية حجماً أولاً.
flex: flex-grow flex-shrink flex-basis; القيمة الابتدائية هي 0 1 autoما لا يكتبه المولّد
- خصائص order وalign-self وgap، ويمكنك إضافتها إلى الحاوية أو إلى عنصر بيدك.
- العناصر بعد الثاني عشر: يتوقف المولّد عند 12 عنصراً، فالقائمة الأطول تُكتب قواعدها بيدك.
مثال محلول: شريط أدوات يلتف، وفيه ثلاثة عناصر
اسم الفئة toolbar، وflex-wrap هي wrap، وjustify-content هي space-between، وalign-items هي center. يحتفظ العنصر الأول بقيمه الابتدائية، فلا تُكتب له قاعدة. ويكبر العنصر الثاني ليملأ المساحة الفائضة، وأساسه 0. ويحتفظ العنصر الثالث بحجمه، وأساسه 200px. ويكتب المولّد قاعدة للعنصرين الثاني والثالث فقط.
| العنصر | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
الأسئلة الشائعة
ما الفرق بين flex-grow وflex-basis؟
flex-basis هو الحجم الذي يبدأ منه العنصر قبل توزيع المساحة الفائضة. ثم يحدد flex-grow كيف تُوزَّع هذه المساحة، بنسبة معامل كل عنصر. والعنصر الذي أساسه 0 ونموه 1 يأخذ المساحة التي تتركها العناصر الأخرى.
لماذا لا تملك العنصر الأول في المثال قاعدة؟
قيمه هي القيم الابتدائية للخصائص: flex-grow 0 وflex-shrink 1 وflex-basis auto. يستعمل المتصفح هذه القيم دون قاعدة، لذلك يكتب المولّد قاعدة للعنصر الذي يختلف عنها فقط.
لماذا تبدأ align-items بالقيمة stretch؟
تعطي وحدة تخطيط الصندوق المرن الخاصية align-items القيمة الابتدائية stretch، فتملأ العناصر المحور المتعامد ما لم تختر قيمة أخرى. ويبدأ المولّد من القيمة نفسها، فيطابق CSS ما يفعله المتصفح دون أي تصريح.
لماذا يقبل الأساس وحدات px وrem وem والنسبة المئوية فقط؟
هذه هي الوحدات التي يتحقق منها المولّد. ويقبل الأساس auto والصفر دون وحدة أيضاً. أما الوحدات الأخرى، مثل vw، فلا يعرضها هذا المولّد، فاكتبها بيدك إن احتاج تخطيطك إليها.
هل أستطيع إضافة فجوة بين العناصر؟
ليس بهذا المولّد، فهو يكتب الخصائص الخمس للحاوية وقيم flex للعناصر فقط. أضف الفجوة إلى قاعدة الحاوية بيدك بعد أن تنسخ CSS.
هل يُرسل CSS الذي أصنعه إلى أي مكان؟
لا. تُنشأ المعاينة وCSS داخل متصفحك، ولا يُخزَّن شيء ولا يُرسل إلى خادمنا. انسخ CSS قبل أن تغادر الصفحة.
المصادر
آخر مراجعة للأرقام والنص: الخميس، 2 جمادى الآخرة 1448 بعد الهجرة.