تخطيط بـ Flexbox

الـ Flexbox يرتّب عناصر متجاورة في صفّ أو عمود. تكتب display: flex على الحاوية، فتصطفّ أبناؤها تلقائيًا.

ثم تتحكّم في التوزيع: gap للمسافة بينها، justify-content لتوزيعها على المحور، وflex-wrap: wrap لتنزل سطرًا جديدًا بدل أن تنضغط على الشاشات الضيّقة.

لأن الصفحة عربية، flex يبدأ من اليمين تلقائيًا — لا تحتاج أن تعكس شيئًا بنفسك.