تصميم Flexbox: ترتيب العناصر بشكل عمودي

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

عند العمل على تصميم يحتاج إلى وضع عناصر فوق بعضها في اتجاه الصفوف، مثل الصور التي تريدها في المشهد الذي وضعته في الصورة المرفقة، يمكن استخدام Flexbox بسهولة لتحقيق هذا الهدف.

في المحاولة الأولى التي وردت في السؤال، تم استخدام عنصر مساعد (اللون الأخضر) لتحقيق التصميم المطلوب. ولكنها طريقة تتطلب الاعتماد على JavaScript لتعديل توزيع العناصر على أجهزة الجوال.

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

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

هناك طريقتان لتحقيق هذا الهدف باستخدام Flexbox:

1. استخدام خاصية الترتيب (order): يمكن تغيير ترتيب العناصر باستخدام خاصية order في Flexbox. بتغيير ترتيب العناصر يمكن وضعها فوق بعضها البعض دون الحاجة إلى تغيير ترتيب العناصر في الشيفرة HTML.

2. استخدام خاصية الانحراف (margin): يمكن استخدام الهوامش لتحقيق تباعد بين العناصر ووضعها فوق بعضها البعض. عن طريق تعيين هوامش موجبة أو سالبة، يمكن التحكم في التباعد بين العناصر.

باستخدام أحد هذين الطريقين، يمكن تحقيق التصميم المطلوب بسهولة ودون الحاجة إلى الاعتماد على JavaScript أو تصميم مختلف للجوال.

بالتأكيد، دعني أوضح المزيد من المعلومات حول كيفية استخدام خاصية Flexbox لتحقيق تصميم يضع عنصرين فوق بعضهما البعض في اتجاه الصفوف.

في البداية، يجب فهم أساسيات Flexbox. Flexbox هو نظام مرن لتوزيع العناصر داخل عنصر والتحكم في تنسيقها وتوزيعها في الفضاء المتاح. يتيح Flexbox لنا تحقيق ترتيب وتنسيق مرن للعناصر دون الحاجة إلى اللجوء إلى تقنيات تعقيدية مثل تعيين الأبعاد بالقيم الثابتة أو استخدام الجداول.

لوضع عنصرين فوق بعضهما البعض في اتجاه الصفوف، يمكن استخدام خاصية flex-direction بقيمة column. هذا سيجعل العناصر تتمركز بشكل رأسي بدلاً من أفقي.

على سبيل المثال، يمكنك استخدام الشيفرة التالية لتحقيق هذا التصميم:

cssCopy code
.container {
  display: flex;
  flex-direction: column; /* توجيه العناصر باتجاه عمودي */
}

.element1, .element2 {
  width: 100%; /* جعل العناصر تمتد على كامل عرض الحاوية */
}

ثم يمكنك ترتيب العناصر في الـ HTML كالتالي:

htmlCopy code
<div class="container">
  <div class="element1">عنصر 1div>
  <div class="element2">عنصر 2div>
div>

بهذا الشكل، ستتم وضع العناصر element1 و element2 فوق بعضهما البعض بشكل رأسي داخل الحاوية container.

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