الفرق بين محاذاة السطر والكتلة | خاصية align-content مع Flexbox في لغة CSS

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمثل التمييز الواضح بين align-items و align-content مفتاح الإتقان الكامل للمحور المتعامد:

align-items تعمل داخل كل سطر على حدة؛ كأن تتوسط شارة قصيرة بجانب زر أطول منها يقع معها في نفس السطر، وتعمل سواء كان لديك سطر واحد أم عدة أسطر.
align-content تعمل بين الأسطر الملتفة ككتل كاملة؛ فتقرر هل يجتمع السطر الأول والسطر الثاني في الأعلى أم في المنتصف أم يتباعدان نحو الحافتين.

شاهد في المثال القابل للتشغيل أدناه كيف تتعاون الخاصيتان معاً دون أي تعارض على نفس الحاوية:

الصف 2 كود برمجي

CSS

.combo-box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  align-items: center;
  height: 170px;
}

الصف 3 ملاحظة هامة

الصف 4 ملاحظة هامة