محمود_سعداوي نشر 3 مايو 2022 أرسل تقرير مشاركة نشر 3 مايو 2022 السلام عليكم. كيف يمكني أن أجعل تنسيق الصفحة الألى مثل تنسيق الصفحة الثانية باستعمال flexbox علما و أني جربت flex-wrap ولم تنجح الصفحة الأولى الصفحة الثانية شكرا. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Sam Ahw نشر 3 مايو 2022 أرسل تقرير مشاركة نشر 3 مايو 2022 في حال كنت تقصد المسافة بين العناصر، 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; } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 3 مايو 2022 الكاتب أرسل تقرير مشاركة نشر 3 مايو 2022 بتاريخ 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 لم تعمل عندما قمت بتجربتها. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Sam Ahw نشر 4 مايو 2022 أرسل تقرير مشاركة نشر 4 مايو 2022 بتاريخ 9 ساعات قال محمود سعداوي: في الواقع قمت بتجربة space around ; space between; و النتيجة: كما أن margin لم تعمل عندما قمت بتجربتها. لقد أخبرتك في التعليق أنه لا يمكنك وضع 6 عناصر بنفس السطر وانتظار الحصول على مسافة بينها، فالعدد كبير ولن يتسع في سطر واحد لذلك سيتم تضييق المسافة بينها كلما زدت عدد العناصر. حاول وضع كل 3 عناصر ضمن div كما أشرت لك في التعليق 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 4 مايو 2022 الكاتب أرسل تقرير مشاركة نشر 4 مايو 2022 بتاريخ 10 ساعات قال Sam Ahw: لقد أخبرتك في التعليق أنه لا يمكنك وضع 6 عناصر بنفس السطر وانتظار الحصول على مسافة بينها، فالعدد كبير ولن يتسع في سطر واحد لذلك سيتم تضييق المسافة بينها كلما زدت عدد العناصر. حاول وضع كل 3 عناصر ضمن div كما أشرت لك في التعليق شكرا. المشكلة كانت في الكروم على ما أعتقد لأني عندما أعدت تشغيل الحاسوب عمل البرانمج جيدا (إستعملت flex-wrap و margin) 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
كيف يمكني أن أجعل تنسيق الصفحة الألى مثل تنسيق الصفحة الثانية باستعمال flexbox علما و أني جربت flex-wrap ولم تنجح
الصفحة الأولى
الصفحة الثانية
شكرا.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.