ساحة تجارب Flexbox وGrid

كيفية استخدام ساحة تجارب Flexbox وGrid

1. اختر التخطيط: Flexbox أو Grid، أو ابدأ من أحد التخطيطات الجاهزة (توسيط وشريط تنقّل وبطاقات تلتفّ وشريط جانبي وشبكة بطاقات متجاوبة والكأس المقدسة (Holy grail) و12 عمودًا).
2. اضبط خصائص الحاوية. في flexbox: ‏flex-direction وflex-wrap. وفي grid: ‏grid-template-columns وgrid-template-rows وgrid-auto-flow وjustify-items وgrid-template-areas. ويشترك الوضعان في justify-content وalign-items وalign-content وrow-gap (px) وcolumn-gap (px).
3. أدِر العناصر بأزرار إضافة عنصر وحذف العنصر المحدد وإعادة ضبط العنصر المحدد. انقر على عنصر في المعاينة (أو انتقل إليه بمفتاح Tab واضغط Enter) لتحديده.
4. عدّل العنصر المحدد: ‏order وalign-self في الوضعين، وflex-grow وflex-shrink وflex-basis في flexbox، وgrid-area وgrid-column وgrid-row وjustify-self في grid.
5. انسخ شيفرة CSS وشيفرة HTML المطابقة لها بزرَّي نسخ الخاصين بهما.

كل عنصر تحكم هو حقل نموذج قياسي، فتعمل ساحة التجارب كلها بلوحة المفاتيح وحدها. ولا تحتوي شيفرة CSS إلا على الخصائص التي غيّرتها عن قيمها الافتراضية، فتبقى قصيرة، وتشترك العناصر ذات الإعدادات المتطابقة في قاعدة واحدة (.item عندما تتطابق كلها).

Flexbox باختصار

يرتّب Flexbox العناصر على محور واحد. تحدّد flex-direction المحور الرئيسي (صف أو عمود)، وتوزّع justify-content العناصر على امتداده (center وspace-between…)، وتضع align-items العناصر على المحور العرضي. ومع flex-wrap: wrap تنتقل العناصر التي لا تتسع إلى سطر جديد، ثم تباعد align-content بين تلك الأسطر.

ولكل عنصر ثلاث خصائص للحجم، تُكتب عادةً معًا في الخاصية flex:

• flex-basis: الحجم الابتدائي (تستخدم auto حجم المحتوى أو قيمة width)؛
• flex-grow: مقدار ما يأخذه العنصر من المساحة الحرة (0 = لا شيء، 1 = حصة متساوية)؛
• flex-shrink: مقدار ما يتنازل عنه عندما تضيق المساحة (0 = لا يتقلص أبدًا).

يعرض التخطيط الجاهز شريط جانبي النمط الكلاسيكي: شريط جانبي بقيمة flex-basis: 200px وflex-shrink: 0، ومنطقة رئيسية بقيمة flex-grow: 1.

CSS Grid باختصار

يرتّب Grid العناصر في بُعدين. تنشئ grid-template-columns: repeat(3, 1fr) ثلاثة أعمدة متساوية، والوحدة fr حصة من المساحة الحرة. أما repeat(auto-fill, minmax(120px, 1fr)) فتنشئ أكبر عدد ممكن من الأعمدة التي لا يقل عرض كل منها عن 120px، فتحصل على شبكة بطاقات متجاوبة دون أي استعلام وسائط (media query).

تملأ العناصر الخلايا بالترتيب ما لم تحدّد أماكنها: فالقيمة grid-column: span 2 تجعل العنصر بعرض عمودين، وgrid-column: 1 / -1 تمدّه على الصف كله.

وتتيح لك grid-template-areas رسم التخطيط بالأسماء. اكتب صفًا واحدًا في كل سطر، مثل header header ثم nav main، وأعطِ العناصر grid-area: header أو grid-area: main. وتدل النقطة على خلية فارغة. يجب أن يحتوي كل صف على العدد نفسه من الخلايا، وأن يشكّل كل اسم مستطيلًا، وإلا نبّهتك الأداة.