تخطيط بـ Flexbox

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

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

وإذا كان اتجاه الصفحة من اليمين إلى اليسار بدأ flex من اليمين تلقائيًا، فلا تحتاج إلى عكس شيء بنفسك.