الدرس 33

الحد الأدنى والأقصى للأبعاد باستخدام min و max

مش لازم تثبت أبعاد العنصر على رقم واحد تقدر تسيبه يتغير وتحدد له حدود مينزلش عنها أو ميكبرش فوقها

<div class="box">A Flexible Box With A Maximum Width</div>

.box {
  box-sizing: border-box;
  width: 100%;
  max-width: 500px;
  padding: 20px;
  margin: 0 auto;
  background-color: #eee;
}

العنصر بياخد العرض المتاح لكن مبيكبرش عن 500 بكسل

لو المكان أقل من كده بيصغر معاه وال padding محسوبة جوه العرض بسبب border-box

min-width: 200px;

لو ضفت السطر ده العنصر مش هيصغر عن 200 بكسل

حتى لو المكان المتاح أقل فممكن يخرج بره الأب اختار أقل عرض على قد احتياجك

جرب المثال ده مكان تنسيق .box

.box {
  width: 300px;
  min-height: 120px;
  padding: 20px;
  box-sizing: border-box;
  background-color: lightblue;
}

العنصر ارتفاعه على الأقل 120 بكسل

ولو المحتوى احتاج مساحة أكبر هيزيد معاه لأننا محددناش height ثابتة

max-height: 200px;

لو ضفت السطر ده ارتفاع الصندوق مش هيزيد عن 200 بكسل

لكن الكلام الزيادة مش بيتمسح وممكن يظهر بره الصندوق

طريقة عرض الزيادة بتتحكم فيها خاصية overflow

صغر نافذة المتصفح مع مثال max-width

وبعدها جرب نص قصير ونص طويل مع min-height ولاحظ الفرق عن height الثابتة

آخر تعديل للدرس: 19/10/2026