شرح صفوف ومحتوى الفقرة
لا تحتاج دائماً إلى كتابة استعلام @media لجعل صف البطاقات يتكيف مع مختلف الشاشات؛ فعند إقران flex-wrap: wrap و gap: 16px على الحاوية الأب مع التصريح المختصر flex: 1 1 260px على كل بطاقة، تنكسر البطاقات تلقائياً إلى سطر جديد فور ضيق المساحة عن 260px، ثم تتمدد لتملأ عرض السطر بتوازن أنيق.
CSS
.card-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.flex-card {
flex: 1 1 260px;
padding: 18px;
}