توضيح flexbox في css3

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

<div class="parent">

  <div>...</div>
  <div>...</div>
  <div>...</div>
  
</div>


.parent {
display: flex;
justify-content: space-between;
}

ولكن يجب عليك الانتباه إلى عدد العناصر بأن يكون متناسب مع أحجام الشاشات، كلما زاد عدد العناصر قلّت المسافة بينها لذلك يمكنك فصل الأسطر عن بعضها أي تجميع كل 3 مكونات بوسم div أب. وبالتالي ستتموضع كل 3 عناصر أسفل بعضها البعض.

كما يمكنك استخدام space-evenly في حال أردت المسافة متساوية حتى مع اعتبار الهوامش:

.parent{
justify-content: space-evenly;
}

بتاريخ 4 دقائق مضت قال Sam Ahw:

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

<div class="parent">

  <div>...</div>
  <div>...</div>
  <div>...</div>
  
</div>


.parent {
display: flex;
justify-content: space-between;
}

ولكن يجب عليك الانتباه إلى عدد العناصر بأن يكون متناسب مع أحجام الشاشات، كلما زاد عدد العناصر قلّت المسافة بينها لذلك يمكنك فصل الأسطر عن بعضها أي تجميع كل 3 مكونات بوسم div أب. وبالتالي ستتموضع كل 3 عناصر أسفل بعضها البعض.

كما يمكنك استخدام space-evenly في حال أردت المسافة متساوية حتى مع اعتبار الهوامش:

.parent{
justify-content: space-evenly;
}

 

في الواقع قمت بتجربة space around ; space between; و النتيجة:

كما أن margin لم تعمل عندما قمت بتجربتها.

بتاريخ 9 ساعات قال محمود سعداوي:

في الواقع قمت بتجربة space around ; space between; و النتيجة:

كما أن margin لم تعمل عندما قمت بتجربتها.

لقد أخبرتك في التعليق أنه لا يمكنك وضع 6 عناصر بنفس السطر وانتظار الحصول على مسافة بينها، فالعدد كبير ولن يتسع في سطر واحد لذلك سيتم تضييق المسافة بينها كلما زدت عدد العناصر.

حاول وضع كل 3 عناصر ضمن div كما أشرت لك في التعليق

بتاريخ 10 ساعات قال Sam Ahw:

لقد أخبرتك في التعليق أنه لا يمكنك وضع 6 عناصر بنفس السطر وانتظار الحصول على مسافة بينها، فالعدد كبير ولن يتسع في سطر واحد لذلك سيتم تضييق المسافة بينها كلما زدت عدد العناصر.

حاول وضع كل 3 عناصر ضمن div كما أشرت لك في التعليق

شكرا.

المشكلة كانت في الكروم على ما أعتقد لأني عندما أعدت تشغيل الحاسوب عمل البرانمج جيدا (إستعملت flex-wrap و margin)