مين و ماكس خصائص العرض / الطول في CSS

ترجمة " Min and Max Width / Height in CSS " لأحمد شديد.

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

في هذه المقالة ، سوف نتعرف على خصائص CSS بالحد الأقصى والحد الأدنى للعرض والارتفاع ، ونلقي نظرة تفصيلية على كل منها وحالات استخدامها.

خصائص العرض

أرغب في بدء المناقشة مع الخصائص المتعلقة بالعرض. لدينا الحد min-width max-width, وكل واحد منهم مهم للغاية ومفيد في بعض المواقف.

الحد الأدنى للعرض (العرض الأدنى)

الغرض min-width خاصية min-width هو منع عرض العنصر الذي يتم تقليله إلى ما دون القيمة المحددة. القيمة الافتراضية هي auto ، والتي يمكن أن ترتفع إلى 0 .

لإظهار ذلك ، دعونا نلقي نظرة على مثال أساسي:



يوجد زر به نص ، يمكن أن يختلف حجمه من كلمة إلى عدة كلمات. للتأكد من أن هذا الزر سيكون له الحد الأدنى للعرض المسموح به ، حتى لو كان هناك كلمة واحدة فقط في الداخل ، فأنت بحاجة إلى استخدام min-width . تم ضبط الحد الأدنى للعرض على 100 بكسل ، لذلك حتى إذا كان الزر يحتوي على محتويات قصيرة جدًا ، مثل كلمة "تم" أو مجرد رمز ، فسيظل كبيرًا بدرجة كافية لتبقى ملحوظة. هذا مهم بشكل خاص عند العمل مع المواقع المترجمة إلى لغات مختلفة.

النظر في مثال اللغة العربية على تويتر:



في المثال أعلاه ، يحتوي الزر على كلمة "تم" ، والتي تعني "إنهاء" باللغة العربية. نظرًا للمحتوى القصير ، أصبح عرض الزر نفسه صغيرًا جدًا ، لذلك قمت بتعيين الحد الأدنى عن طريق تعيين خاصية min-width ، والتي يمكن رؤيتها في الصورة على اليمين (في قسم "بعد").

الحد الأدنى للعرض والحشو

على الرغم من أن خاصية min-width تسمح بزيادة في عرض زر مع زيادة حجم محتواه ، يجب أن يظل padding على الجانبين لضمان المسافة البادئة من حدوده. يظهر الفرق في الشكل أدناه.

أقصى عرض (أقصى عرض)

تم تصميم الخاصية max-width لمنع العنصر من التوسع إلى ما بعد القيمة المحددة. القيمة الافتراضية هي none .

مثال شائع وبسيط لاستخدام أقصى عرض هو تطبيقه على الصور. النظر في المثال أدناه:



إذا طبقنا خاصية max-width: 100% على الصورة ، فستظل ضمن حدود العنصر الأصل ، على الرغم من أن حجمها الأصلي أكبر. إذا كانت الصورة أصغر في البداية من الأصل ، فإن هذه الخاصية لن تؤثر عليها بأي شكل من الأشكال.

باستخدام مين العرض والعرض الأقصى

إذا كانت كلتا الخواص تنطبق على عنصر ما ، فهل أي منهما سيتجاوز قيمة العنصر الآخر؟ بمعنى آخر ، أي عقار له أولوية أعلى؟

إذا كانت قيمة min-width أكبر من max-width ، فسيتم اعتبارها كعرض للعنصر. النظر في المثال التالي:

HTML

 <div class="wrapper"> <div class="sub"></div> </div> 

CSS

 .sub { width: 100px; min-width: 50%; max-width: 100%; } 

قيمة width الأولي هي 100 بكسل ، بالإضافة إلى ذلك ، يتم تعيين خصائص max-width min-width max-width . نتيجة لذلك ، لن يتجاوز عرض هذا العنصر 50٪ من عرض الكتلة الأصلية

خصائص الارتفاع

بالإضافة إلى الحد الأدنى والحد الأقصى لخصائص العرض ، هناك نفس الخصائص للارتفاع

الحد الأدنى للارتفاع (الحد الأدنى للارتفاع)

min-height تصميم min-height لمنع سقوط العنصر دون القيمة المحددة. القيمة الافتراضية هي auto ، والتي يمكن أن ترتفع إلى 0 .

لإثبات ذلك ، دعونا نلقي نظرة على مثال بسيط.

لدينا قسم مع محتوى النص. من الضروري أن تبدو جميلة مع وجود كميات كبيرة وصغيرة من النص



CSS

 .sub { display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 100px; color: #fff; background: #3c78dB; } 

يتم تعيين الحد الأدنى للارتفاع إلى 100 بكسل ، ويتم توسيط المحتوى باستخدام الصندوق المرن أفقيًا وعموديًا. ماذا يحدث إذا كان هناك المزيد من المحتوى؟ على سبيل المثال ، سيكون هناك فقرة كاملة



نعم ، لقد خمنت بالفعل. سيزيد ارتفاع القسم لاستيعاب المزيد من المحتوى. مع هذا ، يمكننا إنشاء مكونات مرنة تستجيب لمقدار المحتوى.

أقصى ارتفاع (أقصى ارتفاع)

max-height تصميم max-height لمنع أي عنصر من زيادة ارتفاعه إلى ما بعد القيمة المحددة. القيمة الافتراضية هي none .

في المثال التالي ، قمت بتعيين max-height للمحتوى. ولكن نظرًا لأنها أكبر من المساحة المحددة ، يحدث تجاوز السعة ويتجاوز النص حدود العنصر الأصل

أمثلة استخدام الممتلكات

ضع في اعتبارك بعض حالات الاستخدام الشائعة والنادرة لخصائص min-width و min-height و max-width و max-height .

قائمة العلامات

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



مع هذه المرونة ، ستبدو العلامة جيدة مهما كانت محتوياتها قصيرة. ولكن ماذا يحدث إذا قام المؤلف بتعيين اسم علامة كبير جدًا ، وإذا كان نظام إدارة المحتوى (CMS) الذي يستخدمه ليس له حدود على عدد الأحرف في العلامة؟ في هذه الحالة ، يمكنك أيضًا استخدام max-width

CSS

 .c-tag { display: inline-block; min-width: 100px; max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*Other styles*/ } 

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

https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

زر

هناك سيناريوهات مختلفة لاستخدام الحد الأدنى والحد الأقصى لخصائص الأزرار ، حيث يوجد أيضًا العديد من الخيارات لمكونات الأزرار. النظر في التصميم التالي:



يرجى ملاحظة أن عرض زر "Get" صغير جدًا. إذا كان الزر لسبب ما لا يحتوي على نص (ولكن فقط رمز) ، فقد يصبح كل شيء أسوأ. في هذه الحالة ، يعد تحديد الحد الأدنى للعرض مهمًا جدًا

تحديد الصفر للعرض الأدنى لـ Flexbox

القيمة الافتراضية للخاصية min-width هي تلقائي ، والتي يتم تقييمها إلى صفر. عندما يكون العنصر عنصرًا مرنًا ، لا تصبح قيمة min-width صفرًا. الحد الأدنى لحجم العنصر المرن هو حجم محتوياته.

وفقًا لـ CSSWG :
افتراضيًا ، لا تصبح العناصر المرنة أصغر من الحد الأدنى للحجم المطلوب من محتواها (طول أطول كلمة أو عنصر بحجم ثابت). لتغيير هذا ، قم بتعيين min-height min-width أو min-height .

النظر في المثال التالي:



يحتوي اسم المستخدم على كلمة طويلة جدًا تؤدي إلى التمرير في التدفق الأفقي. على الرغم من أنني أضفت CSS أدناه لاقتطاع المحتوى:

CSS

 .c-person__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 

نظرًا لأن الرأس عنصر مرن ، فإن الحل هو إعادة تعيين قيمة العرض الأدنى وجعلها صفرية

CSS

 .c-person__name { /*Other styles*/ min-width: 0; } 

إليك ما يجب أن يبدو عليه بعد الإصلاح:



يتبع من وصف CSSWG أن تعيين خاصية overflow إلى قيمة أخرى غير visible يمكن أن يتسبب في حساب قيمة العرض الأدنى على أنها صفر ، وهو ما يحل مشكلتنا أيضًا دون الحاجة إلى ضبط min-width: 0 الصريح min-width: 0 .

الصفر الحد الأدنى لارتفاع Flexbox

على الرغم من أن هذه مشكلة أقل شيوعًا مقارنة بالعرض الأدنى ، إلا أنها لا تزال تحدث. المشكلة في العناصر المرنة التي لا يمكن أن تكون أقصر من محتوياتها. نتيجة لذلك ، يتم تعيين قيمة min-height مساوية لحجم المحتوى.

النظر في المثال التالي:



يجب قطع النص باللون الأحمر على حدود الحاوية. ولكن نظرًا لأن هذا العنصر هو عنصر مرن ، فإن min-height يساوي ارتفاع المحتوى. لمنع هذا ، يجب علينا إعادة تعيين الحد الأدنى لقيمة الارتفاع. لنلقِ نظرة على كود HTML و CSS:

HTML

 <div class="c-panel"> <h2 class="c-panel__title"><!-- Title --></h2> <div class="c-panel__body"> <div class="c-panel__content"><!-- Content --></div> </div> </div> 

CSS

 .c-panel { display: flex; flex-direction: column; height: 180px; } .c-panel__body { min-height: 0; } .c-panel__content { overflow-y: scroll; height: 100%; } 

إضافة min-height: 0 عنصر سيعيد تعيين قيمة الخاصية وسيبدأ العمل كما هو متوقع
عرض

باستخدام العرض الأدنى والحد الأقصى للعرض في نفس الوقت

في بعض الأحيان تكون هناك مواقف عندما يكون لدينا عنصر بحد أدنى للعرض ، ولكن في نفس الوقت ، لا يتم تحديد الحد الأقصى للعرض. يمكن أن يؤدي هذا إلى أن يصبح العنصر واسعًا للغاية ، على الرغم من أن هذا السلوك لم يكن مقصودًا. النظر في المثال التالي:



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

أضفت CSS التالي للصور:

CSS

 img { min-width: 35%; max-width: 70%; } 

حاوية الصفحة

أحد أكثر السيناريوهات المفيدة لاستخدام الخاصية max-width هو التفاف الصفحة (أو الحاوية). من خلال تعيين الصفحة على الحد الأقصى للعرض ، يمكننا أن نتأكد من أنه سيكون من المناسب للمستخدمين عرض وقراءة المحتوى



في ما يلي مثال لملف توسيط ذو padding يسار ويمين

CSS

 .wrapper { max-width: 1170px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; } 

أقصى عرض ووحدة القياس "ch"

وحدة القياس ch تساوي عرض الحرف 0 (صفر) المستخدم في خط العنصر الحالي. باستخدامه في خاصية max-width ، يمكننا ضبط عدد الأحرف في السلسلة. وفقًا لهذه المقالة من مجلة Smashing ، يبلغ طول الخط الموصى به من 45 إلى 75 حرفًا.

في المثال السابق مع عنصر التفاف ، يمكننا الاستفادة من استخدام هذا الرمز ، لأنه عنصر مقال

CSS

 .wrapper { max-width: 70ch; /* Other styles */ } 

تحريك عنصر ذو ارتفاع غير معروف

في بعض الأحيان نواجه مشكلة تنشيط الأكورديون أو قائمة الهاتف المحمول مع ارتفاع محتوى غير معروف. في هذه الحالة ، قد يكون استخدام max-height حلاً جيدًا.

النظر في المثال التالي:



عند الضغط على زر القائمة ، يجب أن تظهر القائمة نفسها بسلاسة من أعلى إلى أسفل. يستحيل القيام بذلك بدون JavaScript ، إلا إذا كان للعنصر ارتفاع ثابت (وهذا غير مستحسن). ومع ذلك ، هذا ممكن مع أقصى ارتفاع. تتمثل الفكرة في إضافة ارتفاع مرتفع جدًا للعنصر ، على سبيل المثال ، max-height: 20rem ، لن يتم الوصول إليه ، وبعد ذلك يمكننا ضبط خطوات الحركة من max-height: 0 ، إلى max-height: 20rem

CSS

 .c-nav { max-height: 0; overflow: hidden; transition: 0.3s linear; } .c-nav.is-active { max-height: 22rem; } 

انقر على همبرغر لرؤية الرسوم المتحركة في العمل

الحد الأدنى لارتفاع القسم العلوي (البطل)

كما ترون ، لا أحب إعطاء العناصر ارتفاعًا ثابتًا. أشعر أنه عند القيام بذلك ، أعارض مفهوم أن تكون المكونات على الويب مرنة. تعد إضافة الحد الأدنى للارتفاع للقسم الأول من الموقع (قسم "البطل") مفيدة في الحالات التي تتم فيها إضافة محتوى كبير جدًا (يحدث هذا).

النظر في المثال التالي ، حيث لدينا قسم "البطل" مع ارتفاع ثابت. انها تبدو جيدة.



ومع ذلك ، عندما ينمو المحتوى ، فإنه يتجاوز الحاوية ويتجاوز غلاف المقطع. هذا سيء



لتجنب هذه المشكلة مقدمًا ، يمكننا إضافة min-height بدلاً من min-height . نحن نفعل ذلك بالضبط ، على الأقل من أجل إزالة ضميرنا. على الرغم من أن هذا قد يكون السبب وراء عرض صفحة غريبة إلى حد ما ، أعتقد أنه يجب منع مثل هذه الحالات في المقام الأول ، في نظام إدارة المحتوى (CMS). بعد ذلك ، تم إصلاح المشكلة والصفحة تبدو جيدة:



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



إذا حددت ليس ارتفاعًا ثابتًا ، ولكن حصرته فقط في الحد الأدنى باستخدام min-height ، فلن تحدث المشكلة الموضحة أعلاه على الإطلاق.

نافذة مشروط

بالنسبة لمكون الإطار المشروط ، يجب عليك تحديد الحد الأدنى والحد الأقصى للعرض ، وبالتالي ، سيعمل ذلك على شاشات من أي حجم (من الجوال إلى سطح المكتب). هذا يذكرنا بمقال مثير للاهتمام حول CSS-Tricks ، والذي يروي ما يجب فعله في هذه الحالة.

1 الطريق

 .c-modal__body { width: 600px; max-width: 100%; } 

2 الطريق

 .c-modal__body { width: 100%; max-width: 600px; } 

بالنسبة لي ، فأنا أفضل الطريقة الثانية ، حيث أنني فقط بحاجة إلى تحديد max-width: 600px . نافذة مشروطة هي عنصر div ، لذلك لديها بالفعل مجموعة عرض = 100 ٪ من الوالد ، أليس كذلك؟

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

الحد الأدنى للارتفاع وتذييل لزجة

عندما لا يكون محتوى الصفحة كبيرًا بما يكفي ، فلا يُتوقع أن يتم تذييل الصفحة بالجزء السفلي. دعونا نلقي نظرة على مثال يوضح هذا بشكل أفضل:



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



أولاً ، لقد جعلت العنصر الأساسي عبارة عن حاوية مرنة ، ثم ضبطه على ارتفاع 100٪ كحد أدنى من منفذ العرض.

CSS

 body { display: flex; flex-direction: column; min-height: 100vh; } footer { margin-top: auto; } 

أوصي بقراءة هذه المقالة على تذييل الصفحة اللزجة.
عرض

أحجام العناصر المتناسبة والحد الأقصى للعرض / الارتفاع

لإنشاء حاوية متناسبة يتم تغيير حجمها وفقًا لحجم منفذ العرض ، تم تقديم الاختراق مرة واحدة باستخدام الحشو . الآن يمكننا محاكاة السلوك المماثل من خلال الجمع بين وحدات إطار العرض والحد الأقصى للعرض / الارتفاع.

بناءً على مقالات من مقال بقلم ميريام سوزان ، أريد أن أوضح كيف يعمل هذا.



لدينا صورة بأبعاد 644 × 1000 بكسل. نحتاج إلى القيام بما يلي:

• نسبة العرض إلى الارتفاع: height / width (الارتفاع مقسومًا على العرض)
  
• عرض الحاوية: يمكن أن تكون ثابتة أو ديناميكية (100 ٪)
  
• اضبط height على 100٪ من عرض إطار العرض مضروبًا في نسبة العرض إلى الارتفاع
  
• اضبط max-height مساوٍ لنسبة العرض إلى max-height في الحاوية
  
• اضبط max-width يساوي عرض الحاوية
  

CSS

 img { --ratio: 664 / 1000; --container-width: 30em; display: block; height: calc(100vw * var(--ratio)); max-height: calc(var(--container-width) * var(--ratio)); width: 100%; max-width: var(--container-width); } 

HTML / Body مع ارتفاع 100٪

ماذا لو أردنا أن يحتل عنصر الجسم 100٪ من ارتفاع إطار العرض؟ هذا سؤال شائع في مجتمع الويب ككل وفي موقع StackOverflow على وجه الخصوص.

تحتاج أولاً إلى ضبط height: 100% على عنصر html . هذا سيضمن أن العنصر الجذر هو 100 ٪ عالية. ثم أضف min-height لعنصر body . سبب استخدام min-height هو أن هذه الخاصية تسمح بارتفاع عنصر العنصر ديناميكيًا ، وتعديل حجم المحتوى

CSS

 html { height: 100%; } body { min-height: 100%; } 

عرض

الملاحظات

الحد الأدنى للعرض وكتلة العناصر

ننسى أحيانًا أن العنصر الذي نحاول تطبيقه على min-width هو block. في النهاية ، يمكن أن يكون هذا مربكًا ولا يؤثر على العنصر. تأكد من أن العنصر ليس ممتلئًا

وظائف مقارنة CSS

أثناء البحث في StackOverflow عن المشكلات الرئيسية التي يواجهها المطورون ، صادفت هذا السؤال الذي يطرح فيه المؤلف ما يلي:

هل من الممكن أن تفعل شيئا مثل هذا؟ max-width: calc(max(500px, 100% - 80px)) أو ربما هذا max-width: max(500px, calc(100% - 80px)))

السلوك المطلوب هو الحفاظ على عرض العنصر لا يزيد عن 500 بكسل. إذا كان عرض النطاق غير كافٍ لاستيعاب العنصر ، فينبغي أن يكون العرض 100% – 80px .

بالنسبة للحل المنشور ردًا على السؤال ، فقد حاولت تطبيقه ويعمل في Chrome 79 و Safari 13.0.3. على الرغم من أن هذا الأمر خارج عن نطاق المقالة ، إلا أنني سأقدم حلًا هنا:

CSS

 .yourselector { max-width: calc(100% - 80px); } /* Update: I changed the max-width from 500px to 580px. Thanks @fvsch */ @media screen and (max-width: 580px) { .yourselector { max-width: 500px; } } 

المصادر والمواد لمزيد من الدراسة

• فليكس البنود والعرض دقيقة: 0 من قبل دومينيك ماكفي
• CSS: Flex و "min-width" بقلم دومينيك شولر
• Flexbugs من قبل فيليب والتون