كيفية إنشاء أقسام قابلة للتمرير أفقيا مع Flexbox

تركز هذه المقالة على المثال ، والمشكلة التي سنحلها هي مشكلة عادية.

قسم التمرير المكتمل: https://codepen.io/ohansemmanuel/full/ybMwpj/
الطريق إلى التعلم عن طريق المبدأ طويل ، ومثال قصير وفعال - Lucius Seneca

تركز هذه المقالة على المثال ، والمشكلة التي سنحلها هي مشكلة عادية.

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

حول flexbox! نعم ، هذا هو الجواب القصير.

دعنا نلاحظ ذلك قليلاً.

إعداد التعليمات البرمجية الأساسية

النظر في العلامات أدناه.

إنه في الأساس قسم يحتوي على عناصر div زوجين كأطفال.

أنماط الكود

لأن لا أحد يحب التصاميم القبيحة ، فلنوفر بعض التصميم الأساسي للغاية:

الأسطر القليلة الأولى ، 1 - 5 تحدد بشكل واضح عرض عناصر الجذر وارتفاعها إلى 100٪

يمنح السطر 8 للجسم لونًا خلفيًا ، بينما يسطر السطر 9 على الهامش حول الجسم ، بينما تضمن الخطوط من 10 إلى 12 وضع العنصر الفرعي المباشر للجسم في الوسط تمامًا - رأسياً وأفقياً.

لرؤية هذا ساري المفعول ، أعط العنصر الفرعي ،

بعض التصميم:

الخط 2 هو واضح تماما. يضمن السطر 3 أن القسم يأخذ 100٪ من عرض الحاوية بشكل افتراضي. السطر 4 يتأكد من أن ارتفاع القسم لا يتجاوز 200 بكسل

الآن يجب أن يبدو كل شيء هكذا في هذه المرحلة:

تتركز تماما. قسم البطاقة

الآن سنضع البطاقة - divs ذات المحتوى داخل قسم البطاقة في الاستخدام الجيد.

دعونا نحصل على بعض الأساليب البسيطة جدًا مرة أخرى.

أولاً ، اجعل البطاقة حاوية مرنة:

.card {display: flex}

ثم نمط .card - المحتوى كما يلي:

يضمن السطر 3 أن يكون عرض كل بطاقة أقل من 200 بكسل ، وكل شيء آخر بسيط للغاية.

إليكم نتيجة ذلك:

انتقل القسم مع الفائض

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

دعنا نقول للمتصفح بالتحديد التمرير إلى قسم البطاقة.

للقيام بذلك ، أضف هذا:

.بطاقة {
  تجاوز-س: السيارات ؛
}

ولدينا قسم للتمرير:

قسم التمرير مع شريط التمرير

حسن!

إخفاء شريط التمرير

لأسباب UX قد ترغب في إخفاء شريط التمرير ، ولا يزال لديك قسم قابل للتمرير.

هناك طريقة سهلة - لمتصفحات webkit على الأقل.

.card :: - webkit-scrollbar {
  عرض لا شيء؛
}

سيؤدي هذا إلى إخفاء أشرطة التمرير ، والتي يمكن القول أنها أكثر جمالا.

استكمال قسم التمرير أفقيا

تطبيقات

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

وهنا بضعة أمثلة:

(ط) يمكن أن يكون لديك مجموعة من الصور في قسم أفقي - إصدار instangram الخاص بك

https://codepen.io/ohansemmanuel/full/NjpmWY/

(2) يمكنك الحصول على مجموعة من النصوص ، إذا كان ذلك مفيدًا لك.

https://codepen.io/ohansemmanuel/full/RVpOaV/

أن نكون صادقين ، الاحتمالات لا حصر لها - كل ذلك في خدمتكم.

تريد أن تصبح برو؟

قم بتنزيل ورقة الغش المجانية لشبكة CSS ، واحصل أيضًا على دورتي Flexbox تفاعليتين عالي الجودة مجانًا!

احصل على ورقة CSS المجانية لشبكة الغش + دورتان فليكس بوكس ​​عالي الجودة مجانًا!

أحصل عليها الآن