أدوات العرض والفليكس بوكس

<!-- فئات العرض الأساسية --> <div class="d-inline">عنصر سطري</div> <div class="d-inline-block">عنصر سطري كتلة</div> <div class="d-block">عنصر كتلة</div> <div class="d-flex">حاوية فليكس</div> <div class="d-grid">حاوية جريد</div> <div class="d-none">عنصر مخفي</div> <!-- أدوات العرض المتجاوبة --> <div class="d-none d-sm-block d-md-flex d-lg-inline-block"> مخفي على XS، كتلة على SM، فليكس على MD، سطري-كتلة على LG+ </div> <!-- إخفاء على نقاط توقف محددة --> <div class="d-block d-md-none"> مرئي على الموبايل، مخفي على الديسكتوب </div> <div class="d-none d-md-block"> مخفي على الموبايل، مرئي على الديسكتوب </div>

<!-- اتجاه الفليكس --> <div class="d-flex flex-row"> <div>عنصر 1</div> <div>عنصر 2</div> <div>عنصر 3</div> </div> <div class="d-flex flex-row-reverse"> العناصر بترتيب أفقي معكوس </div> <div class="d-flex flex-column"> <div>عنصر 1</div> <div>عنصر 2</div> <div>عنصر 3</div> </div> <div class="d-flex flex-column-reverse"> العناصر بترتيب عمودي معكوس </div> <!-- تغليف الفليكس --> <div class="d-flex flex-wrap"> عناصر متعددة يمكن أن تلتف إلى السطر التالي </div> <div class="d-flex flex-nowrap"> العناصر تبقى في سطر واحد (افتراضي) </div> <div class="d-flex flex-wrap-reverse"> العناصر تلتف بترتيب معكوس </div> <!-- اتجاه الفليكس المتجاوب --> <div class="d-flex flex-column flex-md-row"> عمودي على الموبايل، أفقي على الديسكتوب </div>

<!-- فئات محاذاة المحتوى --> <div class="d-flex justify-content-start"> العناصر محاذاة للبداية (افتراضي) </div> <div class="d-flex justify-content-center"> العناصر في المنتصف </div> <div class="d-flex justify-content-end"> العناصر محاذاة للنهاية </div> <div class="d-flex justify-content-between"> مسافة بين العناصر </div> <div class="d-flex justify-content-around"> مسافة حول العناصر </div> <div class="d-flex justify-content-evenly"> مسافة متساوية بين جميع العناصر </div> <!-- محاذاة المحتوى المتجاوبة --> <div class="d-flex justify-content-start justify-content-md-center"> محاذاة للبداية على الموبايل، في المنتصف على الديسكتوب </div>

<!-- محاذاة العناصر (للحاوية) --> <div class="d-flex align-items-start" style="height: 200px;"> العناصر محاذاة للأعلى </div> <div class="d-flex align-items-center" style="height: 200px;"> العناصر في المنتصف عمودياً </div> <div class="d-flex align-items-end" style="height: 200px;"> العناصر محاذاة للأسفل </div> <div class="d-flex align-items-baseline"> العناصر محاذاة بخط الأساس للنص </div> <div class="d-flex align-items-stretch" style="height: 200px;"> العناصر تتمدد لملء الارتفاع (افتراضي) </div> <!-- المحاذاة الذاتية (للعناصر الفردية) --> <div class="d-flex align-items-start" style="height: 200px;"> <div>عنصر 1</div> <div class="align-self-center">عنصر في المنتصف</div> <div class="align-self-end">عنصر في الأسفل</div> </div> <!-- المحاذاة المتجاوبة --> <div class="d-flex align-items-start align-items-md-center"> محاذاة للأعلى على الموبايل، في المنتصف على الديسكتوب </div>

<!-- ملء الفليكس --> <div class="d-flex"> <div class="flex-fill">عنصر 1 (يملأ المساحة المتاحة)</div> <div class="flex-fill">عنصر 2 (يملأ المساحة المتاحة)</div> <div>عنصر 3 (عرض طبيعي)</div> </div> <!-- نمو الفليكس --> <div class="d-flex"> <div class="flex-grow-1">ينمو لملء المساحة</div> <div>عرض ثابت</div> </div> <div class="d-flex"> <div class="flex-grow-0">لا ينمو</div> <div class="flex-grow-1">ينمو</div> </div> <!-- انكماش الفليكس --> <div class="d-flex"> <div class="flex-shrink-1">يمكن أن ينكمش</div> <div class="flex-shrink-0">لا يمكن أن ينكمش</div> </div> <!-- الترتيب --> <div class="d-flex"> <div class="order-3">الأول في DOM، الثالث بصرياً</div> <div class="order-1">الثاني في DOM، الأول بصرياً</div> <div class="order-2">الثالث في DOM، الثاني بصرياً</div> </div> <!-- الترتيب المتجاوب --> <div class="d-flex flex-column flex-md-row"> <div class="order-2 order-md-1">الثاني على الموبايل، الأول على الديسكتوب</div> <div class="order-1 order-md-2">الأول على الموبايل، الثاني على الديسكتوب</div> </div>

<!-- دفع إلى اليمين --> <div class="d-flex"> <div>عنصر يساري</div> <div class="ms-auto">عنصر يميني</div> </div> <!-- دفع إلى الجوانب --> <div class="d-flex"> <div>يسار</div> <div class="mx-auto">مركز</div> <div>يمين</div> </div> <!-- دفع إلى الأسفل (في عمود) --> <div class="d-flex flex-column" style="height: 300px;"> <div>محتوى علوي</div> <div class="mt-auto">محتوى سفلي</div> </div> <!-- مثال التنقل --> <nav class="d-flex align-items-center p-3 bg-light"> <div class="fw-bold">الشعار</div> <div class="ms-auto d-flex gap-3"> <a href="#">الرئيسية</a> <a href="#">من نحن</a> <a href="#">اتصل بنا</a> </div> </nav>

<!-- بطاقة مع تذييل في الأسفل --> <div class="card" style="height: 300px;"> <div class="card-body d-flex flex-column"> <h5 class="card-title">عنوان البطاقة</h5> <p class="card-text">محتوى البطاقة</p> <div class="mt-auto"> <button class="btn btn-primary">إجراء</button> </div> </div> </div> <!-- أعمدة متساوية الارتفاع --> <div class="row"> <div class="col-md-4"> <div class="d-flex flex-column h-100 p-3 bg-light"> <h4>ميزة 1</h4> <p class="flex-grow-1">الوصف</p> <button class="btn btn-primary">اعرف المزيد</button> </div> </div> <div class="col-md-4"> <div class="d-flex flex-column h-100 p-3 bg-light"> <h4>ميزة 2</h4> <p class="flex-grow-1">نص وصف أطول</p> <button class="btn btn-primary">اعرف المزيد</button> </div> </div> <div class="col-md-4"> <div class="d-flex flex-column h-100 p-3 bg-light"> <h4>ميزة 3</h4> <p class="flex-grow-1">نص قصير</p> <button class="btn btn-primary">اعرف المزيد</button> </div> </div> </div> <!-- محتوى في المنتصف --> <div class="d-flex justify-content-center align-items-center" style="height: 100vh;"> <div class="text-center"> <h1>في المنتصف تماماً</h1> <p>أفقياً وعمودياً</p> </div> </div> <!-- تخطيط منقسم --> <div class="d-flex flex-column flex-md-row" style="min-height: 100vh;"> <div class="flex-fill p-4 bg-primary text-white"> <h2>الجانب الأيسر</h2> </div> <div class="flex-fill p-4"> <h2>الجانب الأيمن</h2> </div> </div>

<!-- فجوة بين عناصر الفليكس --> <div class="d-flex gap-2"> <div class="p-2 bg-light">عنصر 1</div> <div class="p-2 bg-light">عنصر 2</div> <div class="p-2 bg-light">عنصر 3</div> </div> <!-- أحجام فجوة مختلفة --> <div class="d-flex gap-0">بدون فجوة</div> <div class="d-flex gap-1">فجوة صغيرة</div> <div class="d-flex gap-2">فجوة افتراضية</div> <div class="d-flex gap-3">فجوة متوسطة</div> <div class="d-flex gap-4">فجوة كبيرة</div> <div class="d-flex gap-5">فجوة كبيرة جداً</div> <!-- فجوات الصف والعمود --> <div class="d-flex flex-wrap row-gap-3 column-gap-2"> <div>عنصر</div> <div>عنصر</div> <div>عنصر</div> <div>عنصر</div> </div> <!-- الفجوات المتجاوبة --> <div class="d-flex gap-2 gap-md-4"> فجوة صغيرة على الموبايل، أكبر على الديسكتوب </div>