Stax

ملعب CSS Flexbox

تجربة خصائص Flexbox بصرياً ونسخ CSS المولد.

1
2
3
4
5
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

ما هي ساحة Flexbox؟

بيئة تفاعلية لتعلم وتجربة CSS Flexbox. اضبط الخصائص بصرياً، شاهد التأثير فوراً، انسخ الكود. الطريقة الأسرع لإتقان أهم نظام layout في CSS. أساسي لكل مطور ويب اليوم.

خصائص الأم (Container)

  1. display: flex - تفعيل Flexbox
  2. flex-direction: row/column - الاتجاه
  3. justify-content - محاذاة المحور الرئيسي
  4. align-items - محاذاة المحور المتقاطع
  5. flex-wrap: wrap - السماح بالالتفاف

خصائص الأبناء (Items)

  • flex-grow - معدل النمو (0 افتراضي)
  • flex-shrink - معدل الانكماش
  • flex-basis - الحجم الأساسي قبل التوزيع
  • order - ترتيب العنصر (0 افتراضي)
  • align-self - تجاوز align-items للعنصر

أنماط شائعة

توسيط مطلق: justify-content + align-items مع center. أعمدة متساوية: flex: 1 لكل. شريط تنقل: justify-content: space-between مع flex-wrap. Sticky footer: flex-direction: column + main flex: 1. Flexbox أنقذ المطورين من قرن من اختراقات CSS.

الأسئلة الشائعة

ما هو Flexbox؟
نظام CSS layout قوي للترتيب أحادي البعد (صف أو عمود). 'display: flex' على العنصر الأم، أبناؤه يصبحون مرنين. خصائص: justify-content (أفقي)، align-items (عمودي)، flex-wrap (التفاف)، gap (مسافات). أساسي للويب الحديث.
Flexbox vs Grid؟
Flexbox: أحادي البعد (شريط أو عمود). للقوائم، الأزرار، التنقل. Grid: ثنائي البعد (صفوف وأعمدة). للتخطيط الكامل للصفحة. الحقيقة: استخدم كلاهما. Grid للتخطيط الكلي، Flex للمكونات داخله. نظام مكمّل، ليس متنافساً.
كيف أوسط عنصر تماماً؟
أم: 'display: flex; justify-content: center; align-items: center'. الابن يكون موسطاً أفقياً وعمودياً. 5 سنوات قبل Flexbox، كان كابوساً. اليوم 3 أسطر تحل ما كان يستغرق ساعات. أيضاً: 'place-items: center' (Grid).
ما flex: 1؟
اختصار لـ 'flex: 1 1 0%'. يعني: ينمو (1)، ينكمش (1)، الأساس 0%. النتيجة: العناصر تتقاسم المساحة بالتساوي. مفيد للأعمدة المتساوية. flex: 2 يأخذ ضعف المساحة من flex: 1. flex: 0 0 auto = لا ينمو ولا ينكمش (حجم محتواه فقط).

أدوات ذات صلة