فليكس بوكس CSS
1
2
3
4
5
6
7
8
وحدة تخطيط CSS Flexbox
قبل وحدة Flexbox Layout ، كانت هناك أربعة أوضاع تخطيط:
- حظر ، لأقسام في صفحة ويب
- مضمنة للنص
- جدول لبيانات الجدول ثنائي الأبعاد
- تم وضعه ، للحصول على موضع واضح لعنصر ما
تسهل وحدة تخطيط الصندوق المرن تصميم هيكل تخطيط سريع الاستجابة مرن دون استخدام تعويم أو تحديد الموضع.
دعم المتصفح
يتم دعم خصائص flexbox في جميع المتصفحات الحديثة.
29.0 | 11.0 | 22.0 | 10 | 48 |
عناصر Flexbox
لبدء استخدام نموذج Flexbox ، تحتاج أولاً إلى تحديد حاوية مرنة.
1
2
3
يمثل العنصر أعلاه حاوية مرنة (المنطقة الزرقاء) بثلاثة عناصر مرنة.
مثال
حاوية مرنة بثلاثة عناصر مرنة:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
سوف تتعلم المزيد عن الحاويات المرنة والعناصر المرنة في الفصول التالية.