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

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

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

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

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

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

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

img {
    float: right;
}

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

img {
    float: left;
}

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

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

img {
    float: none;
}

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

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

img {
    float: none;
    vertical-align: top;
}

إيقاف التدفق

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

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

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

div {
    float: left;
}

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

لحل مشكلة التدفق يمكنك ببساطة إضافة وسم يظهر بأسلوب block في نهاية العنصر الأب مثل الوسم <div> و من ثم تضيف له الخاصية 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;
}