flex مشكلة العرض

عز دي · 14 أغسطس

اذا حددت عرض لل p والاب flex مع خصائص

justify-content:center align-item:center

يخرب الشكل ولا يكون هناك محاذاة للوسط بالصفحة كيف طريقة flex مع العرض

سبب تغير العرض لاجل يلتف النص ولا ياخذ مساحة طويلة

* الاب بدون تحديد عرض

Khaled Osama3 · 14 أغسطس

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

و,لاكن كحل سريع عليك عند استخدام Flexbox، إذا كان لديك عنصر أب (container) يحتوي على عناصر (items) وتريد محاذاتها في المركز مع الالتفات بشكل صحيح، يجب عليك ضبط بعض الخصائص الخاصة بـ Flexbox:

.container {
    display: flex;
    justify-content: center; /* محاذاة العناصر أفقياً في المركز */
    align-items: center; /* محاذاة العناصر عمودياً في المركز */
    flex-direction: column; /* يمكن استخدامه لجعل العناصر في عمود واحد إذا كنت تريد ذلك */
    text-align: center; /* محاذاة النصوص في وسط العنصر */
}

.item {
    /* خيارات إضافية مثل الهوامش (margin) إذا لزم الأمر */
}

او يمكنك استخدام

flex-wrap: wrap;

إذا كنت تريد أن يتم التفاف العناصر عندما لا يتسع العرض

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Chihab Hedidi · 14 أغسطس

في حالة استخدام flex مع justify-content: center و align-items: center لتحقيق المحاذاة المركزية في الصفحة، إذا كان هناك خلل في التمحور المركزي بسبب تغير العرض، قد يكون السبب هو أن العنصر الفرعي مثل الفقرة <p> يتجاوز الحدود الطبيعية للعرض نتيجة التفاف النص،

لحل هذه المشكلة، يمكنك تحديد عرض أقصى للفقرة باستخدام خاصية max-width بحيث لا يتجاوز النص مساحة معينة بهذا الشكل:

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
}

.child {
    max-width: 80%; 
    text-align: center; 
}

و تأكد من عدم وجود حدود margin أو padding غير ضرورية قد تؤثر على التمحور.

Mustafa Mahmoud7 · 14 أغسطس

يمكنك عمل حاوية parent وبها العنصر p الخاص بالنص

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="parent">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, obcaecati nam. Adipisci quo at  	     
     reprehenderit,dolorum inventore magni et quibusdam corporis esse commodi, consectetur molestiae, illo    
     similique eos iste sunt.
    </p>
   </div>
</body>
</html>

ثم للحاوية الأب لكل العناصر التي بها الصنف parent نقوم بإعطائها خاصية الـ flex و justify-content: center و align-items: center ليتم توسيط العناصر داخل الحاوية رأسيًا وأفقيا لتكون التنسيقات كالأتي

.parent {
    display: flex;
    justify-content: center; /* محاذاة العناصر أفقيًا في المتتصف */
    align-items: center; /* محاذاة العناصر رأسيًا في المتتصف */
    height: 100vh;
}
p {
    padding: 30px;
    width: 800px;
    background-color: rgb(227, 179, 147);
}

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

يمكنك الإطلاع على هذا المقال حول خاصية Flexbox والاستخدام الصحيح لها

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

flex مشكلة العرض

السؤال

عز دي

3 أجوبة على هذا السؤال

Recommended Posts

Khaled Osama3

Chihab Hedidi

Mustafa Mahmoud7

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية