ما الفرق بين الخاصيتين justify-content و align-content في css ؟

كلاهما خاصيتان خاصتان بالصندوق المرن او ما يعرف ب flex box , اي لا يتم تطبيقهما الا اذا كانت الحاوية لديها الخاصية display:flex , أما بالنسبة للخاصية justify-content فهي تحدد كيفية توزيع المساحة بين عناصر الحاوية وحولها بشكل أفقي ,تأخذ العديد من القيم مثل start و center و end وغيرها,مثلا لو كان لدينا الكود التالي

<div id="main">
  <div style="background-color:green;">1</div>
  <div style="background-color:red;">2</div>
  <div style="background-color:blue;">3</div>
</div>

css
#main {
  width: 400px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
  justify-content: start;
}

#main div {
  width: 50px;
  height: 50px;
}

سوف تكون النتيجة كالتالي

نلاحظ أن العناصر عرضت في بداية الحاوية , ماذا لو قمنا بتغيير القيمة الى center كالتالي

justify-content: center;

سوف تكون النتيجة كالتالي

نلاحظ أن العناصر جاءت في منتصف الحاوية , ربما قد فهمت ما وظيفة الخاصية , وبالفعل لو كانت القيمة end فسوف تعرض في نهاية الحاوية كالتالي

لاحظ يتغير موضع العناصر بشكل أفقي , ولكن ماذا اذا أردنا تغييره بشكل عمودي؟ نستخدم الخاصية الأخرى وهي align-content فهي تحدد طريقة عرض العناصر بشكل عمودي , ولكن يجب أن نستخدم خاصية flex-wrap: wrap; معها للسماح للعناصر بالالتفاف والنزول الى اسفل , لها نفس القيم أيضا فمثلا لو كانت center 

يمكنك تجربة الأمر مع القيم الأخرى
شكرا لك

 السلام عليكم ماهي الحلات التي لا تعمل فيها خاصية justify content

بتاريخ 10 ساعة قال لطفي محمد:

 السلام عليكم ماهي الحلات التي لا تعمل فيها خاصية justify content

خاصية justify-content تُستخدم في  Flexbox لمحاذاة وتوزيع العناصر داخل الـ container بشكل أفقي في حال كانت إتجاه flex هو row وبشكل رأسي في حال كان إتجاه flex هو column، وتعمل الخاصية في معظم الحالات لتحقيق التوزيع الذي تريده.

ولكن هناك بعض الحالات التي قد لا تعمل بها بالشكل المتوقع، أو قد تظهر نتائج غير متوقعة ومنها:

1. في حال كان عرض الـ container ضيقًا للغاية ولا يمكن أن يتسع لعرض جميع العناصر، وبالتالي تتسبب قيم justify-content في نتائج غير متوقعة، مثلاً لو كانت جميع العناصر تستخدم قيمة flex-grow: 1، فلن تكون هناك مساحة كافية لتوزيعها بالتساوي.
2. إن قمت بتحديد عرض ثابت (بوحدة مثل بكسل) للعناصر داخل الـ container، قد لا تعمل justify-content بالشكل المتوقع، فالقيم الثابتة قد تمنع التوزيع المطلوب وتؤدي إلى تجاوز عرض الـ container.
3. عند تعيين flex-wrap إلى قيمة nowrap، سيحاول Flexbox وضع جميع العناصر في سطر واحد دون كسر السطر، وهنا تؤدي قيم justify-content إلى تجاوز عرض الـ container إذا لم تكن هناك مساحة كافية.
4. في حال هناك عناصر تستخدم عرضًا بنسبة مئوية من العرض الكلي للـ container، ربما تظهر نتائج غير متوقعة إذا كان هناك تداخل بين عناصر مختلفة.
5. إذا كان لديك عنصر واحد فقط داخل الـ container واستخدمت قيمة justify-content: space-between، فلن يكون هناك أي توزيع أو مسافة بين العنصر وحافة الـ container.

لاحظ أنه في معظم الحالات، يمكن التلاعب بالقيم المرتبطة بـ Flexbox مثل flex-grow و flex-shrink و flex-basis لتحقيق التوزيع المرغوب، ويُفضل فهم كيفية عمل Flexbox وتفاعل تلك القيم مع بعضها البعض للوصول إلى التصميم المطلوب.

• شرح justify-content من موسوعة حسوب

والموقع التالي سيساعدك في فهم خواص الـ Flexbox:

• https://flexbox.malven.co/