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







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

في الصورة السابقة الcontainer لم يقوم باحتساب ارتفاع العناصر لانه لم يتم عمل clear للعناصر يوجد طريقتين لعمل الclear, اما باضافة عنصر html قبل وسم اغلاق الcontainer التي تحتوي على العناصر او باضافة عنصر وهمي للcontainer او باعطاء overflow:hidden للcontainer

التوزيع بواسطة 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 حتى يبدا من عنده او سيقوم بالبدا من اول الصفحة


http://www.traidnt.net/vb/traidnt2703597/