الفرق بين justify-content: center; align-content: center; align-items: center;

الإتجاه الإفتراضي للعناصر في  CSS Flexbox هو المحور الأفقي، بمعنى يتم تموضع العناصر بشكل أفقي على هيئة صفوف، لذا سأوضح على هذا الأساس، حيث أنّ الأمر مختلف في حال تم تغيير القيمة الإفتراضية إلى المحور الرأسي flex-direction: column

خاصية justify-content تعمل على محاذاة العناصر مًعا ككتلة واحدة على طول المحور الأفقي وتوزع المساحات الفارغة بينها، بمعنى justify-content: center تعمل على تجميع كل العناصر في منتصف الحاوية أفقيًا وأي مساحة فارغة ستكون موزعة بالتساوي على اليمين واليسار.

بينما خاصية align-content هي عكس الخاصية السابقة، حيث تحاذي العناصر ككتلة واحدة على المحور الرأسي أي عموديًا، لذا align-content: center لو يوجد سطران أو أكثر من العناصر، ستقوم الخاصية بتجميع كل الأسطر معًا ككتلة واحدة ووضعها في منتصف الحاوية عموديًا.

لكن لن الخاصية إلا في حال لديك أسطر متعددة من العناصر، وذلك يحدث لو قمت بتعيين خاصية flex-wrap: wrap وتكون العناصر أكثر من أن تتسع في سطر واحد، أي لو هناك سطر واحد فقط، فلن يكون لخاصية  align-content أي تأثير.

وخاصية . align-items هي لمحاذاة العناصر الفردية داخل الحاوية على المحور الرأسي (العمودي)، أي للتحكم في محاذاة الأسطر أو الصفوف داخل حاوية flexbox، وهي تعمل حتى لو يوجد سطر واحد فقط من العناصر.

ولو العناصر أطول من بعضها، فستتم محاذاتها جميعًا في المنتصف بالنسبة لبعضها البعض، لاحظ الفرق:

وعليكم السلام ورحمة الله تعالى وبركاته،

أرجو مراجعة الأجوبة التي في هذا الرابط:

الفرق باختصار يكمن في أنّ:

justify-content: center;

تتحكم بمحاذاة العناصر على المحور الرئيسي (main axis).يعني إذا ال flex-direction: row (المحور الأفقي) فهي تضع العناصر في وسط الأفق وإذا كان flex-direction: column (المحور العمودي) فهي تضع العناصر في وسط العمود.

أما:

align-items: center;

فهي تتحكم بمحاذاة العناصر على المحور العرضي (cross axis) داخل الحاوية يعني إذا ال flex-direction: row (المحور الأفقي) فهي تضع العناصر في وسط العمود وإذا كان flex-direction: column (المحور العمودي) فهي تضع العناصر في وسط الأفق لكن هذه الخاصية تؤثر على كل العناصر كل داخل صفّه (line) فقط.

أما:

align-content: center;

فهي تستخدم فقط عندما يكون عندك أكثر من سطر (multiple lines) من العناصر flex-wrap مفعّل أو في Grid فهي تتحكم بموضع الأسطر كلها مع بعض على المحور العرضي (cross axis) بينما align-items: center يهتم بالعناصر الفردية داخل كل سطر، align-content: center يهتم بتموضع الأسطر كاملةً في الحاوية.