أعمدة Flexbox متساوية العرض - مولد CSS
أنشئ تخطيط CSS flexbox بشكل مرئي: الاتجاه المرن، وضبط المحتوى، ومحاذاة العناصر، والالتفاف المرن والفجوة في الحاوية، بالإضافة إلى النمو المرن لكل طفل، والتقليص المرن، والأساس المرن، كل ذلك مع معاينة مباشرة وCSS قابل للنسخ.
النتيجة
تفتح هذه الصفحة المولد باستخدام flex-grow: 1 الذي تم تعيينه بالفعل على جميع مربعات المعاينة الثلاثة. شاهدها: بدلاً من التقليص لتناسب محتواها، يطالب كل مربع بحصة مماثلة من المساحة المتبقية في الصف، وهي الوصفة الكاملة للأعمدة المرنة ذات العرض المتساوي - لا توجد نسبة مئوية للعرض، ولا توجد عملية حسابية ()، ولا توجد حسابات بيكسل ثابتة للحفاظ على المزامنة.
flex-grow: 1 يخبر الطفل أن ينمو، ووضعه على كل طفل في الصف يعني أنهم جميعًا ينمون بنفس المقدار، لذا ينتهي بهم الأمر بنفس العرض بغض النظر عن عددهم أو المحتوى الموجود بداخلهم. قم بإضافة أو إزالة مربع يحتوي على عناصر التحكم أدناه وإعادة توزيع الأعمدة المتبقية على الفور لتبقى متساوية - قم بتغيير حجم نافذة المتصفح فوق هذا التخطيط في الإنتاج وسيتصرف بنفس الطريقة.
هذا هو النمط الكامن وراء شبكات البطاقات ذات الارتفاع المتساوي، وأعمدة جدول التسعير، وأقسام التذييل المقسمة بالتساوي. امنح عمودًا واحدًا مساحة أكبر عن طريق رفع نموه المرن فوق الأعمدة الأخرى، أو انسخ كتلة CSS أدناه تمامًا كما تم إنشاؤها لتقسيم متساوٍ ونظيف.