html - شرح - لماذا لا تقلص العناصر المرنة حجم المحتوى السابق؟



flexbox شرح (1)

الحد الأدنى التلقائي لحجم فليكس البنود

أنت تواجه إعدادًا افتراضيًا لـ flexbox.

لا يمكن أن يكون العنصر المرن أصغر من حجم محتواه على المحور الرئيسي.

الإعدادات الافتراضية هي ...

  • min-width: auto
  • min-height: auto

... للعناصر المرنة في اتجاه الصف واتجاه العمود ، على التوالي.

يمكنك تجاوز هذه الإعدادات الافتراضية عن طريق تعيين عناصر مرنة على:

  • min-width: 0
  • min-height: 0
  • overflow: hidden (أو أي قيمة أخرى ، ما عدا visible )

مواصفات Flexbox

4.5. الحجم الأدنى التلقائي للعناصر فليكس

لتوفير حد أدنى افتراضي معقول للعناصر المرنة ، تقدم هذه المواصفة قيمة auto جديدة كقيمة أولية لخصائص min-width و min-height المحددة في CSS 2.1.

فيما يتعلق بقيمة auto ...

على عنصر المرن الذي يكون overflow visible في المحور الرئيسي ، عند تحديده في خاصية الحجم الصغير للمحور الرئيسي للعنصر المرن ، يحدد الحد الأدنى للحجم التلقائي . فإنه يحسب خلاف ذلك إلى 0 .

بعبارات أخرى:

  • min-width: auto و min-height: auto تطبيق الإعدادات الافتراضية فقط عندما يكون overflow visible .
  • إذا كانت قيمة overflow غير visible ، تكون قيمة الخاصية min-size هي 0 .
  • وبالتالي ، overflow: hidden يمكن أن تكون overflow: hidden بديلاً للعرض min-width: 0 min-height: 0 .

و...

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

لقد قمت بتطبيق min-width: 0 ومازال العنصر لا يتقلص؟

حاويات فليكس متداخلة

إذا كنت تتعامل مع عناصر مرنة على مستويات متعددة من بنية HTML ، فقد يكون من الضروري تجاوز الحد min-width: auto الافتراضي min-width: auto / min-height: auto على عناصر بمستويات أعلى.

بشكل أساسي ، عنصر مرن أعلى مستوى مع min-width: auto يمكن أن يمنع min-width: auto التقلص على العناصر المتداخلة أدناه ذات min-width: 0 .

أمثلة:

  • عنصر Flex لا يتقلص أصغر من محتواه
  • تركيب الطفل في الوالدين
  • خاصية css ذات المساحة البيضاء تخلق مشاكل مع المرن

ملاحظات تقديم المتصفح

  • Chrome مقابل Firefox / Edge

    منذ عام 2017 على الأقل ، يبدو أن Chrome إما (1) يعود مرة أخرى إلى الحد min-width: 0 / min-height: 0 defaults ، أو (2) يطبق تلقائيًا الإعدادات الافتراضية 0 في مواقف معينة بناءً على خوارزمية لغز. (قد يكون هذا ما يسمونه intervention ). ونتيجة لذلك ، يرى كثير من الناس أن تخطيطهم (وخاصة أشرطة التمرير المرغوبة) تعمل كما هو متوقع في Chrome ، ولكن ليس في Firefox / Edge. تمت تغطية هذه المشكلة بمزيد من التفاصيل هنا: تباين الانكماش بين Firefox و Chrome

  • IE11

    كما هو موضح في المواصفات ، فإن القيمة auto لخصائص min-width و min-height هي "جديدة". هذا يعني أن بعض المتصفحات ربما لا تزال تعرض قيمة 0 افتراضيًا ، لأنها طبقت تخطيطًا مرنًا قبل تحديث القيمة ولأن 0 هي القيمة الأولية min-width min-height في CSS 2.1 . متصفح واحد من هذا القبيل هو IE11. قامت المستعرضات الأخرى بتحديث القيمة auto الأحدث كما هو محدد في مواصفات flexbox .

عرض تجريبي منقح

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}
<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle

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

لقد حاولت استخدام word-break: break-word وساعدت ، ولكن لا يزال عندما أقوم بتغيير حجم العمود إلى عرض صغير للغاية ، يتم تقسيم الحروف في النص إلى أسطر متعددة (حرف واحد في كل سطر) ، ومع ذلك لا الحصول على عرض أصغر من حجم حرف واحد.

شاهد هذا video (في البداية ، يكون العمود الأول هو الأصغر ، لكن عندما أقوم بتغيير حجم النافذة ، يكون هذا هو العمود الأوسع. أريد فقط أن أحترم الإعدادات المرنة دائمًا ؛ الأحجام المرنة 1: 3: 4: 4)

أعرف أن ضبط حجم الخط وحشو العمود على أصغر سيساعد ... ولكن هل هناك أي حل آخر؟

لا أستطيع استخدام overflow-x: hidden .

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}
<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>





flexbox