Flexbugs: النمو المرن مع Flex-base 0 لا يوزع العرض بالتساوي إذا كانت العناصر لها حشوة مختلفة

عندما تحدد flex-basis (كما هو الحال في الاختصار flex الخاص بك) ، ينظر المستعرض إلى ذلك ويتجاهل تمامًا أي بيانات عرض / ارتفاع. لجعل المتصفح يستخدم العرض الذي قمت بتعيينه ، استخدم flex-basis من auto ، أو الأفضل من ذلك ، استخدم فقط flex-basis من 50% لأن هذا هو ما تريده تريد أن يكون العرض.

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

سيعمل flex: 1 1 0% على جعل مربعات المحتوى لمجموعة غير معروفة من العناصر المرنة بنفس الحجم. إذا كنت بحاجة إلى إضافة حشوة إلى أحد العناصر (ولكن ليس جميعها) ، فسيكون الحجم مختلفًا. يمكنك الالتفاف حول هذا عن طريق إنشاء عنصر فرعي ووضع الحشو عليه.

philipwalton ، نعم ، هذا ما فعلته الآن ولكني كنت أتساءل لماذا لا تحسب نفس العروض إذا كانت هناك حشوة مختلفة _ في حين_ باستخدام box-sizing: border-box . هل تعلم لماذا يتصرف هذا بنفس الطريقة أو ما هو سبب ذلك؟

إنها تعمل على النحو المنشود. أعتقد أنك قد تخلط بين جانب العرض مقابل جانب الزيادة / الانكماش المرن.

عندما تقول flex: 1 1 0% ، فأنت تقول أن العرض يجب أن يكون 0% ، ومن ثم يجب أن ينمو / يتقلص بشكل متناسب. أنت لا تقول إنه يجب أن يكون عرضه 50% .

وعندما تعطي شيئًا ما عرضه 0% ، فلن يكون في الواقع 0px كبيرًا إذا كان يحتوي على مساحة / حدود ، كما ترون من هذا المثال: http://codepen.io / anon / pen / PwQBrM

آه ، لهذا السبب - شكرًا جزيلاً على التوضيح!