Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

CSSتدفق العناصر

  • مفهوم تدفق العناصر
  • تحديد جهة التدفق
  • إيقاف التدفق
  • استخدام التدفق في مثال عملي

مفهوم تدفق العناصر

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

Float Left
Float Right

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

تحديد جهة التدفق

نستخدم الخاصية float و نمرر لها إحدى القيم التالية لتحديد جهة التدفق، أي لتحديد الجهة التي سيظهر العنصر فيها.

القيمة معناها
left لجعل العنصر يتدفق من الناحية اليسرى بالنسبة للعنصر الأب الموجود فيه.
right لجعل العنصر يتدفق من الناحية اليمنى بالنسبة للعنصر الأب الموجود فيه.
none لإيقاف التدفق و الظهور في المكان الذي تم تعريفه فيه و هذه هي القيمة الإفتراضية.
inherit لجعل العنصر يرث خاصية التدفق من العنصر الأب حتى يتدفق من ذات الإتجاه.

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

مثال

img {
float: right;
}
img { float: right; }
جرب الكود

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

مثال

img {
float: left;
}
img { float: left; }
جرب الكود

في المثال التالي قمنا بعرض الصورة بدون جعلها تتدفق من ناحية محددة الأمر الذي سيجعل المحتوى الآخر الموضوع بجانبها في نفس العنصر لا يتدفق على باقي المساحة المتاحة.

ملاحظة: القيمة none هي القيمة الإفتراضية لتدفق العنصر و بالتالي يمكنك عدم وضعها أساساً و الحصول على ذات النتيجة.

مثال

img {
float: none;
}
img { float: none; }
جرب الكود

الترتيب الأفقي × التدفق الجانبي

في حال جعلت المحتوى في العنصر الأب يبدأ بالظهور من أعلى الصورة بواسطة الخاصية vertical-align: top; و كان النص يحتاج أكثر من سطر للظهور، فإن السطر الأول فيه سيظهر فقط في الأعلى و باقي الأسطر ستظهر بعد الصورة و بالتالي فإن الترتيب الأفقي لا يغني عن أسلوب التدفق.

مثال

img {
float: none;
vertical-align: top;
}
img { float: none; vertical-align: top; }
جرب الكود

إيقاف التدفق

جعل العناصر تتدفق من إتجاه محدد أمر يسبب مشكلتين في التصميم:

  • العناصر التالية التي توضع بعدها ستظهر بشكل متدفق.
  • المتصفح يصبح غير قادر على تقدير حجم العنصر الأب بشكل صحيح.

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

مثال

div {
float: left;
}
div { float: left; }
جرب الكود

لإيقاف التدفق نستخدم الخاصية clear و نمرر لها إحدى القيم التالية:

القيمة معناها
left لإيقاف التدفق السابق من الناحية اليسرى.
right لإيقاف التدفق السابق من الناحية اليمنى.
both لإيقاف التدفق السابق من الناحيتين اليمنى و اليسرى.

لحل المشكلة التدفق يمكنك ببساطة إضافة وسم يظهر بأسلوب block في نهاية العنصر الأب مثل الوسم <div> و من ثم تضيف له الخاصية clear: both; و هكذا سيتم إيقاف التدفق و سيتمكن المتصفح من ضبط حجم العنصر الأب بشكل صحيح.

مثال

.float-fixer {
clear: both;
}
.float-fixer { clear: both; }
جرب الكود

استخدام التدفق في مثال عملي

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

هذا المثال يجمع الكثير من الخصائص التي شرحناها لك في الدروس السابقة لذا نرجو منك التركيز عليه.

مثال

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1 {
padding: 20px 10px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.pages-nav {
padding: 0 10px;
margin: 20px 0;
}
.pages-nav a {
display: inline-block;
width: 110px;
padding: 10px 15px;
text-align: center;
text-decoration: none;
color: white;
background-color: #0d6efd;
border: 1px solid #0d6efd;
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.pages-nav a.next {
float: right;
}
.float-fixer {
clear: both;
}
* { padding: 0; margin: 0; box-sizing: border-box; } h1 { padding: 20px 10px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 20px; } .pages-nav { padding: 0 10px; margin: 20px 0; } .pages-nav a { display: inline-block; width: 110px; padding: 10px 15px; text-align: center; text-decoration: none; color: white; background-color: #0d6efd; border: 1px solid #0d6efd; border-radius: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; } .pages-nav a.next { float: right; } .float-fixer { clear: both; }
جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة