كيف يمكن ضبط تموضع بطاقات بجانب بعضها داخل حاوية مرنة؟

يحدث هذا لأنك تسند القيمة space-between الى الخاصية justify-content الخاصة بالصندوق المرن حاوي البطاقات. سيحافظ هذا على توزيع العناصر ضمن المستوى الافقي، لن تلاحظ هذا في حال ما كان عدد البطاقات الاجمالي هو 4 مثلا. للتخلص من هاته المشكلة أسند القيمة center لهاته الخاصية فيكون:

#feature {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

أيضا للحفاظ على توزيع المسافات بين البطاقات قد تحتاج اسناد قيمة مناسبة للخاصية gap كـ:

#feature {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

قم ايضا بضبط عرض مناسب للبطاقات fe-box، اقترح بدل ضبط عرض ثابت كـ:

#feature .fe-box {
    width: 180px;

استعمال عرض نسبي كـ:

#feature .fe-box {
    width: 30%;

تصنيف:CSS Flexbox - موسوعة حسوب

الخاصية justify-content - موسوعة حسوب

عملت نفس الي حضرتك قلتهولي مش ظبتت فضلت ادور شوية علشان تظبت باظ اكتر

بتاريخ 2 ساعات قال Ziad Mohamed10:

عملت نفس الي حضرتك قلتهولي مش ظبتت فضلت ادور شوية علشان تظبت باظ اكتر

ما المشكلة الجديدة التي واجهتها تحديدا؟

بتاريخ الآن قال Ziad Mohamed10:

ما الذي تريده بالضبط؟ هل تريد جعل كامل البطاقات في سطر واحد؟

بظبت كلهم في سطر واحد

بتاريخ 1 دقيقة مضت قال Ziad Mohamed10:

بظبت كلهم في سطر واحد

 

تختص الخاصية flex-wrap بعملية كسر السطر في حالة تجاوز العناصر المحور الافقي. بمعنى أنها الخاصية التي تحدد ما ان كانت العناصر داخل الحاوي المرن ستبقى ضمن سطر واحد أو أنها ستلتف الى عدة أسطر. في الحالة التي لدينا لاحظ أننا نضبطها على القيمة wrap:

#feature {
    ..
    flex-wrap: wrap;
    ..
}

وبالتالي ولجبر وضعها على سطر واحد نسند القيمة nowrap:

#feature {
    ..
    flex-wrap: nowrap;
    ..
}

يفترض أن يحل ذلك المشكل لديك.