مشكلة عدم تراص العناصر فوق بعضها عند تصغير الصفحة مع استخدام flex-wrap و display:flex

جميلة درعه · 6 مايو 2023

عند اضافة ;flex-wrap:wrap; و display:flex و عند تصغير الصفحة سينزل عنصر تحت بعض بس لدي لن ينزل العنصر تحت بعض عند تصغير الصفحة مل حل

المشكلة عند

h.

h div.

و شكرا

للمساعدة

الصفحة 1.css الصفحة 1.html

تم التعديل في 6 مايو 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 6 مايو 2023

قمت بتنفيذ الفكرة التي تريدها في الكود التالي لإنشاء <section> تحتوي على <div> وأربعة عناصر <div> داخليّة بأحجام متساوية، وسيتم تراصها فوق بعضها عند تصغير الصفحة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    section {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: lightgray;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 80%;
      height: 80%;
    }

    .box {
      width: 45%;
      height: 45%;
      background-color: tomato;
      margin: 2.5%;
    }

    @media (max-width: 768px) {
      .box {
        width: 90%;
        height: 30%;
      }
    }
  </style>
</head>
<body>
  <section>
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </section>
</body>
</html>

عند تصغير الشاشة إلى حجم أقل من 768 بكسل، سيتم ضبط أحجام العناصر الداخلية لتتناسب مع الشاشة الصغيرة وتظهر بشكل مناسب.

أي أن المشكلة لديك كانت في تحديد العرض بنسبة 13% لعناصر div داخل عنصر <div class="h"> وبالتالي أنت بحاجة إلى تغيير العرض من خلال ميديا كويري كما فعلت في الكود.

أرجو أنك تكون قد فهمت الفكرة، وإذا ما زال هناك أمور غير واضحة لك بالنسبة للتصميم المتجاوب فعليك بقراءة المقالات التالية بعناية:

مشكلة عدم تراص العناصر فوق بعضها عند تصغير الصفحة مع استخدام flex-wrap و display:flex

السؤال

جميلة درعه

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية