احمد زايدن نشر 16 أبريل 2023 أرسل تقرير مشاركة نشر 16 أبريل 2023 احتاج مساعدتكم عندي مشكلة في تصميم لما عم أعطي flex-direction:column عند media max width:991px ماعم يقبل خاصية column و تصيميم فيو مشاكل عند width 991px طبعا قسم مقسم بل flex اذا في امكانية تساعدوني 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 16 أبريل 2023 أرسل تقرير مشاركة نشر 16 أبريل 2023 جرب بإضافة الإشارة important للخاصية flex-direction مثل : flex-direction:column !important; وفي حال لم تشتغل، قم بمشاركة ملفات المشروع. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 16 أبريل 2023 أرسل تقرير مشاركة نشر 16 أبريل 2023 في البداية قم بتجربة وضع !important للتنسيق وذلك لرؤية ما إذا كان هناك تنسيقات أخرى متداخلة. و المشكلة يمكن أن تكون ناتجة عن عدم تعريف أحجام العناصر بشكل صحيح في تنسيقات CSS، وإذا كانت هذه المشكلة تظهر عند حجم الشاشة 991 بكسل، فإنه يمكن أن يكون هذا الحجم هو نقطة الانقسام Break point بين التصميمات الخاصة بالشاشات الصغيرة والكبيرة. ,بما أنك تستخدم Flexbox للتصميم، فيجب عليك التأكد من أن جميع العناصر الموجودة في قسم الـ Flexbox يمكن أن تتناسب بشكل صحيح مع حجم الشاشة، فإذا كانت العناصر غير معرفة بشكل صحيح، فإنها قد تتداخل مع بعضها البعض وتتسبب في المشكلة التي تشير إليها. بالنسبة لخاصية flex-direction: column، يرجى التأكد من أن جميع العناصر الموجودة في Flexbox تم وضعها بشكل صحيح وتحديد أحجامها بشكل صحيح، وحاوال تجربة إضافة flex-shrink: 0 على العناصر الثابتة بشكل صحيح وعدم التغيير في حجمها عند تغيير حجم الشاشة. أيضًا حاول تجربة إعادة تصميم Flexbox الخاص بك باستخدام الـ CSS Grid للتحكم بالتخطيط والأحجام بشكل أفضل. يتيح لك الـ CSS Grid تحديد أحجام الأعمدة والصفوف بدقة وتحكم في تنسيق العناصر بشكل أفضل، مما يجعل من السهل التحكم في التصميم عند تغيير حجم الشاشة. وأرجو منك مشاركة مجلد المشروع أو الكود الخاص بك لتفقد المشكلة، حيث أن جميع الإجابات التي ستحصل عليها مجرد إقتراحات. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 احمد زايدن نشر 16 أبريل 2023 الكاتب أرسل تقرير مشاركة نشر 16 أبريل 2023 (معدل) بتاريخ 2 ساعة قال Mustafa Suleiman: في البداية قم بتجربة وضع !important للتنسيق وذلك لرؤية ما إذا كان هناك تنسيقات أخرى متداخلة. و المشكلة يمكن أن تكون ناتجة عن عدم تعريف أحجام العناصر بشكل صحيح في تنسيقات CSS، وإذا كانت هذه المشكلة تظهر عند حجم الشاشة 991 بكسل، فإنه يمكن أن يكون هذا الحجم هو نقطة الانقسام Break point بين التصميمات الخاصة بالشاشات الصغيرة والكبيرة. ,بما أنك تستخدم Flexbox للتصميم، فيجب عليك التأكد من أن جميع العناصر الموجودة في قسم الـ Flexbox يمكن أن تتناسب بشكل صحيح مع حجم الشاشة، فإذا كانت العناصر غير معرفة بشكل صحيح، فإنها قد تتداخل مع بعضها البعض وتتسبب في المشكلة التي تشير إليها. بالنسبة لخاصية flex-direction: column، يرجى التأكد من أن جميع العناصر الموجودة في Flexbox تم وضعها بشكل صحيح وتحديد أحجامها بشكل صحيح، وحاوال تجربة إضافة flex-shrink: 0 على العناصر الثابتة بشكل صحيح وعدم التغيير في حجمها عند تغيير حجم الشاشة. أيضًا حاول تجربة إعادة تصميم Flexbox الخاص بك باستخدام الـ CSS Grid للتحكم بالتخطيط والأحجام بشكل أفضل. يتيح لك الـ CSS Grid تحديد أحجام الأعمدة والصفوف بدقة وتحكم في تنسيق العناصر بشكل أفضل، مما يجعل من السهل التحكم في التصميم عند تغيير حجم الشاشة. وأرجو منك مشاركة مجلد المشروع أو الكود الخاص بك لتفقد المشكلة، حيث أن جميع الإجابات التي ستحصل عليها مجرد إقتراحات. حاولت جميع طرق لم تعمل وتصميم داخل مع بعضها البعض تم التعديل في 16 أبريل 2023 بواسطة احمد زايدن 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Adnane Kadri نشر 16 أبريل 2023 أرسل تقرير مشاركة نشر 16 أبريل 2023 بتاريخ 3 ساعة قال احمد زايدن: حاولت جميع طرق لم تعمل وتصميم داخل مع بعضها البعض لا يمكن استخدام خاصية flex-direction: column على عنصر flex عندما يصل عرض الشاشة إلى 991 بكسل أو أقل، لأن العرض يكون غير كافي لإظهار العناصر بشكل رأسي في حالتك. بدلاً من ذلك، يمكنك استخدام خاصية flex-wrap: wrap على عنصر flex الأب للسماح بانزلاق العناصر إلى أسفل الصفحة عندما يتم تصغير العرض. وبالنسبة لتصميم العرض في العرض الذي يساوي 991 بكسل، يمكنك تحديد قيم max-width للعناصر داخل الـflex لتجنب مشاكل العرض. فيما يلي مثال على كيفية تطبيق هذا الأمر: .flex-container { display: flex; flex-wrap: wrap; } .flex-item { max-width: 33%; } @media (max-width: 991px) { .flex-item { max-width: 50%; } } في هذا المثال، تم تقسيم الأصناف داخل عنصر flex إلى 3 عناصر، وتم تحديد max-width للعنصر flex-item إلى 33٪. عندما يصل عرض الشاشة إلى 991 بكسل، يتم تغيير قيمة max-width لتصبح 50٪ بدلاً من 33٪، وذلك لتجنب مشاكل العرض. جرب ذلك وأخبرنا ما ان حل ذلك مشكلتك. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 احمد زايدن نشر 16 أبريل 2023 الكاتب أرسل تقرير مشاركة نشر 16 أبريل 2023 بتاريخ 12 دقائق مضت قال Adnane Kadri: لا يمكن استخدام خاصية flex-direction: column على عنصر flex عندما يصل عرض الشاشة إلى 991 بكسل أو أقل، لأن العرض يكون غير كافي لإظهار العناصر بشكل رأسي في حالتك. بدلاً من ذلك، يمكنك استخدام خاصية flex-wrap: wrap على عنصر flex الأب للسماح بانزلاق العناصر إلى أسفل الصفحة عندما يتم تصغير العرض. وبالنسبة لتصميم العرض في العرض الذي يساوي 991 بكسل، يمكنك تحديد قيم max-width للعناصر داخل الـflex لتجنب مشاكل العرض. فيما يلي مثال على كيفية تطبيق هذا الأمر: .flex-container { display: flex; flex-wrap: wrap; } .flex-item { max-width: 33%; } @media (max-width: 991px) { .flex-item { max-width: 50%; } } في هذا المثال، تم تقسيم الأصناف داخل عنصر flex إلى 3 عناصر، وتم تحديد max-width للعنصر flex-item إلى 33٪. عندما يصل عرض الشاشة إلى 991 بكسل، يتم تغيير قيمة max-width لتصبح 50٪ بدلاً من 33٪، وذلك لتجنب مشاكل العرض. جرب ذلك وأخبرنا ما ان حل ذلك مشكلتك. مشكل كانت من position:absolute لقد جربت flex-wrap قامت بتقسم عرض ب flex-basis 50% تم حل مشكلة اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
احمد زايدن
احتاج مساعدتكم عندي مشكلة في تصميم لما عم أعطي flex-direction:column عند media max width:991px ماعم يقبل خاصية column و تصيميم فيو مشاكل عند width 991px طبعا قسم مقسم بل flex اذا في امكانية تساعدوني
رابط هذا التعليق
شارك على الشبكات الإجتماعية
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.