في هذا المقال سوف تتعرف على طرق توزيع العناصر بواسطةCSS3 مع مميزات و عيوب و متى يمكن استخدام كل طريقة.


توزيع العناصر بواسطة float

تعتبر طريقة float من الطرق الشائعة في توزيع العناصر و يتم استخدامها في العديد من اطر العمل مثل bootstrap و تتميز طريقة float بالسهولة في توزيع العناصر حيث يتم عمل float للعناصر ب left/right مع عمل clear:both لاخر عنصر من عناصر الfloat بواسطة عنصر html او عنصر وهمي او للعنصر الذي تريد ان يتوقف ال float عنده.
العناصر التي تحتوي على خاصية الfloat تخرج من اطار العمل الخاص بها اذا لم يتم عمل clear , بمعني ان الصفحة لا تقوم باحتساب الابعاد الخاصة بالعناصر كما في الصورة التالية

توزيع العناصر بالfloat
توزيع العناصر بدون استخدام clear

في الصورة السابقة الcontainer لم يقوم باحتساب ارتفاع العناصر لانه لم يتم عمل clear للعناصر
يوجد طريقتين لعمل الclear, اما باضافة عنصر html قبل وسم اغلاق الcontainer التي تحتوي على العناصر او باضافة عنصر وهمي للcontainer او باعطاء overflow:hidden للcontainer
container:after {
    content: '';
    display: block;
    clear: both; 
}

التوزيع بواسطة display: inline-block

تتميز هذه الطريقة بانها لاتحتاج الا الى اعطاء خاصية inline-block للعناصر التي تريد توزيعهم وtext-align للcontainer اما ب left لازاحة العناصر الى اليسار او right لازاحة العناصر الى اليمين

عيوب هذه الطريقة ان العناصر التي تحتوي على خاصية inline-block تمتلك مسافة قبل و بعد كل عنصر مما يؤدي الى الزيادة في ابعاد العنصر لذلك يفضل استخدام هذه الطريقة اذا كان مجموع مساحة العناصر اقل من 97% مثل توزيع عناصر القائمة او الوسوم
لحل مشكلة المسافة يمكن عملfloat للعناصر التي تحتوي على خاصية inline-block

التوزيع بواسطة display:flex

تعتبر هذه الطريقة جديدة في توزيع العناصر و مدعومة في العديد من المتصفحات مثل +google chrome 49 لمعرفة المزيد حول دعم المتصفحات يمكنك زيارة هذا الموقع caniuse flexbox
كل ما تحتاج اليه لتوزيع العناصر هو اعطاء display:flex للcontainer و justify-content اما بflex-start لتوزيع العناصر من اليسار او flex-end لتوزيع العناصر من جهة اليمين

التوزيع بواسطة ال absolute:position

تعتبر هذه الطريقة من الطرق الغير مفضلة في توزيع العناصر لانها تقوم باخراج العنصر من الworkflow مما يؤدي الى عدم احتساب ابعادها و لكن يمكن حل هذه المشكلة باعطاء ابعاد للcontainer

يجب اعطاء position:relative للcontainer الذي يحتوي على عنصر absolute:position حتى يبدا من عنده او سيقوم بالبدا من اول الصفحة

التوزيع بواسطة ال display:grid

هذه الطريقة من الطرق الجديدة في توزيع العناصر حيث تم حل جميع مشاكل الطرق السابقة في خاصية ال display:grid
هذه الطريقة غير مدعومة في العديد من المتصفحات و يفضل عدم استخدامها في الوقت الحالي caniuse css grid
لمعرفة المزيد حول display:grid يمكنك قراءة هذا المقال css-tricks او من موقع mozilla CSS_Grid_Layout