مشكلة في خاصية الـ flex-direction و في الـ media

جرب بإضافة الإشارة  important للخاصية flex-direction مثل :

flex-direction:column !important;

وفي حال لم تشتغل، قم بمشاركة ملفات المشروع.

في البداية قم بتجربة وضع !important للتنسيق وذلك لرؤية ما إذا كان هناك تنسيقات أخرى متداخلة.

و المشكلة يمكن أن تكون ناتجة عن عدم تعريف أحجام العناصر بشكل صحيح في تنسيقات CSS، وإذا كانت هذه المشكلة تظهر عند حجم الشاشة 991 بكسل، فإنه يمكن أن يكون هذا الحجم هو نقطة الانقسام Break point بين التصميمات الخاصة بالشاشات الصغيرة والكبيرة.

,بما أنك تستخدم Flexbox للتصميم، فيجب عليك التأكد من أن جميع العناصر الموجودة في قسم الـ Flexbox يمكن أن تتناسب بشكل صحيح مع حجم الشاشة، فإذا كانت العناصر غير معرفة بشكل صحيح، فإنها قد تتداخل مع بعضها البعض وتتسبب في المشكلة التي تشير إليها.

بالنسبة لخاصية flex-direction: column، يرجى التأكد من أن جميع العناصر الموجودة في Flexbox تم وضعها بشكل صحيح وتحديد أحجامها بشكل صحيح، وحاوال تجربة إضافة flex-shrink: 0 على العناصر الثابتة بشكل صحيح وعدم التغيير في حجمها عند تغيير حجم الشاشة.

أيضًا حاول تجربة إعادة تصميم Flexbox الخاص بك باستخدام الـ CSS Grid للتحكم بالتخطيط والأحجام بشكل أفضل. يتيح لك الـ CSS Grid تحديد أحجام الأعمدة والصفوف بدقة وتحكم في تنسيق العناصر بشكل أفضل، مما يجعل من السهل التحكم في التصميم عند تغيير حجم الشاشة.

وأرجو منك مشاركة مجلد المشروع أو الكود الخاص بك لتفقد المشكلة، حيث أن جميع الإجابات التي ستحصل عليها مجرد إقتراحات.

بتاريخ 2 ساعة قال Mustafa Suleiman:

في البداية قم بتجربة وضع !important للتنسيق وذلك لرؤية ما إذا كان هناك تنسيقات أخرى متداخلة.

و المشكلة يمكن أن تكون ناتجة عن عدم تعريف أحجام العناصر بشكل صحيح في تنسيقات CSS، وإذا كانت هذه المشكلة تظهر عند حجم الشاشة 991 بكسل، فإنه يمكن أن يكون هذا الحجم هو نقطة الانقسام Break point بين التصميمات الخاصة بالشاشات الصغيرة والكبيرة.

,بما أنك تستخدم Flexbox للتصميم، فيجب عليك التأكد من أن جميع العناصر الموجودة في قسم الـ Flexbox يمكن أن تتناسب بشكل صحيح مع حجم الشاشة، فإذا كانت العناصر غير معرفة بشكل صحيح، فإنها قد تتداخل مع بعضها البعض وتتسبب في المشكلة التي تشير إليها.

بالنسبة لخاصية flex-direction: column، يرجى التأكد من أن جميع العناصر الموجودة في Flexbox تم وضعها بشكل صحيح وتحديد أحجامها بشكل صحيح، وحاوال تجربة إضافة flex-shrink: 0 على العناصر الثابتة بشكل صحيح وعدم التغيير في حجمها عند تغيير حجم الشاشة.

أيضًا حاول تجربة إعادة تصميم Flexbox الخاص بك باستخدام الـ CSS Grid للتحكم بالتخطيط والأحجام بشكل أفضل. يتيح لك الـ CSS Grid تحديد أحجام الأعمدة والصفوف بدقة وتحكم في تنسيق العناصر بشكل أفضل، مما يجعل من السهل التحكم في التصميم عند تغيير حجم الشاشة.

وأرجو منك مشاركة مجلد المشروع أو الكود الخاص بك لتفقد المشكلة، حيث أن جميع الإجابات التي ستحصل عليها مجرد إقتراحات.

 حاولت جميع طرق لم تعمل وتصميم داخل مع بعضها البعض   

بتاريخ 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٪، وذلك لتجنب مشاكل العرض. جرب ذلك وأخبرنا ما ان حل ذلك مشكلتك.

بتاريخ 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%  تم حل مشكلة