"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
أدوات على الانترنت
برنامج تعليمي
التنقل في الموقع
برمجة
الصفحة الأمامية > برمجة > كيفية إنشاء عناصر مرنة متداخلة في صف أفقي؟

كيفية إنشاء عناصر مرنة متداخلة في صف أفقي؟

تم النشر بتاريخ 2024-11-08
تصفح:476

How to Create Overlapping Flex Items in a Horizontal Row?

إنشاء عناصر مرنة متداخلة

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

نهج Flexbox

لتحقيق التداخل، يمكننا استخدام النهج التالي:



overflow: visible;

.البطاقة {

العرض: 10 ملم؛ الحد الأدنى للعرض: 10 مم؛ الارتفاع: 6م؛ نصف قطر الحدود: 0.5em؛ الحدود: الصلبة #666 1px؛ لون الخلفية: #ccc؛ الحشو: 0.25 م؛ العرض: فليكس؛ الاتجاه المرن: العمود؛ ضبط المحتوى: مركز؛ align-items: center;
width: 10em;
min-width: 10em;
height: 6em;
border-radius: 0.5em;
border: solid #666 1px;
background-color: #ccc;
padding: 0.25em;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}



قم بلف كل عنصر مرن في ملف .cardWrapper div.
  • افتراضيًا، قم بتعيين .cardWrapper بحيث يكون تجاوز السعة: مخفيًا. سيؤدي هذا إلى إخفاء أي تجاوز من بطاقة الطفل.
  • استخدم :last-child أو :hover للسماح للعنصر الأخير أو العناصر التي تم تمرير مؤشر الماوس عليها بعرض تجاوز سعة.
  • قم بتعيين عناصر .card على لها عرض ثابت وأدنى عرض لمنع تقلصها.
  • إخفاء أي تجاوز من عناصر .card باستخدام التجاوز: مخفي.
أحدث البرنامج التعليمي أكثر>
تصنيفأكثر>
تعلم اليابانية تعلم اللغة الكورية تعلم اللغة الصينية تعلم لغة أجنبية لعبة مشكلة شائعة ملحقات التكنولوجيا منظمة العفو الدولية برنامج تعليمي برمجة شرط

دراسة اللغة الصينية

أداةأكثر>
فك تشفير الصورة Base64
بينيين الصينية
ترميز يونيكود
JS ضغط تشفير التشويش
أداة تشفير URL الست عشري
أداة تحويل ترميز UTF-8
أدوات تشفير وفك تشفير Ascii عبر الإنترنت
أداة التشفير MD5
أداة تشفير وفك تشفير النصوص Hash/Hash عبر الإنترنت
تشفير SHA عبر الإنترنت

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

Copyright© 2022 湘ICP备2022001581号-3