أساسيات Flexbox والمحاور (Flex Container & Items)

1. ما هو نظام Flexbox وكيف يعمل؟

نظام Flexbox (Flexible Box Layout) هو أسلوب تصميم متطور يتيح ترتيب المحتوى في اتجاه واحد (إما أفقي صفوف أو عمودي أعمدة) بمرونة فائقة تلقائياً دون الحاجة لاستخدام التحديد القديم كـ Float.

بمجرد كتابة display: flex; للحاوية، تتحول جميع العناصر المباشرة بداخلها إلى أبناء مرنين (Flex Items) يرتصفون أفقياً بشكل افتراضي.

2. التحكم بالاتجاه والالتفاف (flex-direction & flex-wrap)

يمكننا إعادة توجيه مسار حركة العناصر وسلوك الالتفاف عبر الخواص التالية:

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}