تدفق العناصر The Flow في CSS

حتى لو لم تقم بإضافة أي تنسيق CSS لصفحة الويب فإن العناصر في HTML لها شكل إفتراضي تظهر به في صفحة الويب، يتم توزيع العناصر في صفحة الويب بشكل إفتراضي إعتماداً على التدفق الطبيعي للعناصر في الصفحة.

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

 بإستخدام خصائص CSS الخاصة بتموضع العناصر تم تغير تدفق الصفحة من التدفق الإفتراضي (الرأسي) إلى التدفق الأفقي

سيولة العناصر في HTML

في HTML، المحتوى هو العامل الرئيسي الذي يدور حوله كل شيئ.
جميع العناصر ذات النوع block تعتبر عناصر متدفقة، أي أنها تقوم بشكل إفتراضي بتكييف تخطيطها لتناسب المحتوى الموجود بداخلها:
العرض = ١٠٠٪ : 
العناصر ذات النوع block تقوم بالتمدد في جميع المساحة المتاحة لها في صفحة الويب.

الطول = تلقائي : 
يتغير الطول بشكل تلقائي ليناسب حجم المحتوى.

إنحناء/التفاف الكلمات : 
إذا كانت العناصر inline التي تعيش داخل عنصر block لا يكفيها سطر واحد فإنها ستلتف بشكل تلقائي لتكمل في سطر جديد.

ترتيب العناصر في HTML

تظهر العناصر في صفحة الويب بنفس الترتيب الذي كتبت به في ملف HTML (العنصر المكتوب أولاً في ملف HTML هو العنصر الذي سيظهر أولاً في صفحة الويب) من أعلى إلى أسفل.

تراص العناصر Stacking في html

نافذة متصفح الويب لديها ثلاثة اتجاهات X Y Z
يمكن للعناصر أن تصطف أفقياً X أو عمودياً Y أو حتى فوق بعضها البعض (البعد الثالث Z )، البُعد الثالث هذا يعتمد على تداخل العناصر، العناصر الأبناء ستظهر فوق العنصر الأب.

تخيل الصورة التالية، العنصر الأب يوجد بداخله العنصر الأبن (يظهر فوق العنصر الأب) وبداخل العنصر الإبن توجد العناصر الأحفاد ( تظهر فوق العنصر الإبن) وهكذا..

في المثال التالي، العنصر <div> يوجد بداخله العنصر <p> وبداخل العنصر <p> يوجد العنصر <strong>:

See the Pen The Flow | example #1 by Ashraf Reda (@ashrafreda) on CodePen.

كسر التدفق الإفتراضي للعناصر في صفحة الويب

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

• تحديد أبعاد العناصر، ( height & width ) بإمكانة تغيير التدفق الإفتراضي للعناصر.
• الخاصية float ، تُخرج العنصر من التدفق الإفتراضي للصفحة، وتجعله يتصرف بشكل مختلف عما يحيط به من عناصر (إنها الخاصية الأكثر غرابة ذات النتائج غير المتوقعة).
• الخاصية position بالقيم absolute أو Fixed، تطبيق هذة الخاصية على العنصر بإحدى هذة القيم، تقوم بحذف العنصر من التدفق الإفتراضي لصفحة الويب، كأنه غير موجود مع باقي العناصر في الصفحة.
• الخاصية z-index هذة الخاصية تتحكم في البعد الثالث للعناصر في صفحة الويب، بإمكانها إخفاء عنصر أسفل عنصر آخر.