شرح صفوف ومحتوى الفقرة
لماذا تتباعد صفوف الأوسمة الملتفة داخل صندوق بارتفاع 180px بفراغ رأسي واسع غير مرغوب فيه فور انتقالها لسطر ثانٍ؟ السبب هو القيمة الافتراضية الابتدائية align-content: stretch التي تقسم الارتفاع الفائض على مسارات الأسطر لتتمدد وتملأ الحاوية.
بمجرد تغيير القيمة إلى align-content: center يلغى تمدد المسارات وتجتمع جميع الأسطر الملتفة متقاربة في منتصف الحاوية تماماً مع الحفاظ على فجوة gap الأنيقة بينها:
CSS
.tags-center {
display: flex;
flex-wrap: wrap;
align-content: center;
gap: 8px;
height: 150px;
}