ابزار فلکس
با مجموعه کاملی از ابزارهای فلکس باکس واکنشگرا، طرح بندی، ترازبندی و سایزبندی ستون های شبکه، ناوبری، کامپوننت ها و موارد دیگر را به سرعت مدیریت کنید.
مثال کد
<div class="d-flex p-2 bg-lighter">من یک کانتینر فلکس باکس هستم!</div>
مثال کد
<div class="d-inline-flex p-2 bg-lighter">من یک کانتینر فلکس باکس درون خطی هستم!</div>
جهت
جهت افقی پیش فرض آیتم فلکس row است. اگر می خواهید جهت را تغییر دهید، از flex-row برای جهت افقی و flex-row-reverse برای جهت افقی مخالف استفاده کنید. جهت عمودی پیش فرض column است، از flex-column یا flex-column-reverse برای جهت عمودی مخالف استفاده کنید.
مثال کد
<div class="d-flex flex-row bg-lighter mb-3"> <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 flex-row-reverse bg-lighter"> <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 flex-column bg-lighter mb-3"> <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 flex-column-reverse bg-lighter"> <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>
تراز محتوا
در کانتینر فلکس باکس از ابزارهای justify-content برای تغییر ترازبندی آیتم های فلکس استفاده کنید. کلاس های زیادی وجود دارد. فقط (start, end, center, between, around) را به justify-content اضافه کنید.
مثال کد
<div class="d-flex justify-content-start">...</div> <div class="d-flex justify-content-end">...</div> <div class="d-flex justify-content-center">...</div> <div class="d-flex justify-content-between">...</div> <div class="d-flex justify-content-around">...</div>
ترازبندی آیتم ها
در کانتینر فلکس باکس از ابزارهای align-items برای تغییر ترازیندی آیتم های فلکس در محور متقاطع استفاده کنید. کلاس های زیادی وجود دارد. فقط (start, end, center, baseline, stretch) را به align-items اضافه کنید.
مثال کد
<div class="d-flex align-items-start">...</div> <div class="d-flex align-items-end">...</div> <div class="d-flex align-items-center">...</div> <div class="d-flex align-items-baseline">...</div> <div class="d-flex align-items-stretch">...</div>
ترازبندی خود آیتم
در آیتم های فلکس باکس از ابزارهای align-self برای تغییر ترازبندی استفاده کنید. کلاس های زیادی وجود دارد. فقط (start, end, center, baseline, stretch) را به align-self اضافه کنید.
مثال کد
<div class="align-self-start">آیتم فلکس ترازبندی شده</div> <div class="align-self-end">آیتم فلکس ترازبندی شده</div> <div class="align-self-center">آیتم فلکس ترازبندی شده</div> <div class="align-self-baseline">آیتم فلکس ترازبندی شده</div> <div class="align-self-stretch">آیتم فلکس ترازبندی شده</div>
پر کردن
از کلاس flex-fill در آیتم های فلکس استفاده کنید.
مثال کد
<div class="d-flex bg-light"> <div class="p-2 flex-fill bg-light">آیتم فلکس با محتوای زیاد</div> <div class="p-2 flex-fill bg-light">آیتم فلکس</div> <div class="p-2 flex-fill bg-light">آیتم فلکس</div> </div>
رشد و کوچک شدن
از ابزارهای .flex-grow-* برای تغییر قابلیت رشد آیتم های فلکس برای پر کردن فضای موجود استفاده کنید. در مثال زیر، عناصر .flex-grow-1 از تمام فضای موجود استفاده می کنند، در حالی که به دو آیتم باقی مانده اجازه می دهد که فضای لازم را برای خود انعطاف پذیر کنند.
مثال کد
<div class="d-flex bg-light">
<div class="p-2 flex-grow-1 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">سومین آیتم فلکس</div>
</div>
مثال کد
<div class="d-flex bg-light"> <div class="p-2 w-100 bg-light">آیتم فلکس</div> <div class="p-2 flex-shrink-1 bg-light">آیتم فلکس</div> </div>
حاشیه های بیرونی خودکار
برای حاشیه بیرونی چپ و راست خودکار، فقط از کلاس .ms-auto، me-auto در آیتم های فلکس استفاده کنید.
مثال کد
<div class="d-flex bg-lighter mb-3"> <div class="p-2 bg-light">آیتم فلکس</div> <div class="p-2 bg-light">آیتم فلکس</div> <div class="p-2 bg-light">آیتم فلکس</div> </div> <div class="d-flex bg-lighter mb-3"> <div class="me-auto p-2 bg-light">آیتم فلکس</div> <div class="p-2 bg-light">آیتم فلکس</div> <div class="p-2 bg-light">آیتم فلکس</div> </div> <div class="d-flex bg-lighter mb-3"> <div class="p-2 bg-light">آیتم فلکس</div> <div class="p-2 bg-light">آیتم فلکس</div> <div class="ms-auto p-2 bg-light">آیتم فلکس</div> </div>
با align-items
برای حاشیه بیرونی بالا و پایین خودکار، فقط از کلاس .mt-auto، mb-auto در آیتم های فلکس استفاده کنید.
مثال کد
<div class="d-flex align-items-start flex-column bg-lighter mb-3" style="height: 200px;"> <div class="mb-auto p-2 bg-light">آیتم فلکس</div> <div class="p-2 bg-light">آیتم فلکس</div> <div class="p-2 bg-light">آیتم فلکس</div> </div> <div class="d-flex align-items-end flex-column bg-lighter mb-3" style="height: 200px;"> <div class="p-2 bg-light">آیتم فلکس</div> <div class="p-2 bg-light">آیتم فلکس</div> <div class="mt-auto p-2 bg-light">آیتم فلکس</div> </div>
پوشش دهی (Wrap)
نحوه پوشش دادن آیتم های فلکس را در یک کانتینر فلکس تغییر دهید. با .flex-nowrap، از بین بدون پوشش دهنده (پیش فرض مرورگر)، پوشش دهی با .flex-wrap، یا پوشش دهی معکوس با .flex-wrap-reverse انتخاب کنید.
مثال کد
<div class="d-flex flex-nowrap bg-light" style="width: 8rem;">
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
</div>
مثال کد
<div class="d-flex flex-wrap bg-light">
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
</div>
مثال کد
<div class="d-flex flex-wrap-reverse bg-light">
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
<div class="p-2 bg-light">آیتم فلکس</div>
</div>
ترتیب بندی
ترتیب بندی بصری آیتم های فلکس خاص را با تعدادی ابزار کاربردی order تغییر دهید. ما فقط گزینه هایی را برای اولین یا آخرین مورد و همچنین بازنشانی برای استفاده از ترتیب بندی DOM ارائه می دهیم.
مثال کد
<div class="d-flex flex-nowrap bg-light"> <div class="order-3 p-2 bg-light">اولین آیتم فلکس</div> <div class="order-2 p-2 bg-light">دومین آیتم فلکس</div> <div class="order-1 p-2 bg-light">سومین آیتم فلکس</div> </div>
ترازبندی محتوا
از ابزارهای align-content در کانتینر فلکس باکس برای ترازبندی آیتم های فلکس در محور متقاطع استفاده کنید. از ابتدا (پیش فرض مرورگر)، end، center، between، around یا stretch را انتخاب کنید. برای نشان دادن این ابزارها، flex-wrap: wrap را اعمال کردیم و تعداد آیتم های فلکس را افزایش دادیم.
مثال کد
<div class="d-flex align-content-start flex-wrap">...</div> <div class="d-flex align-content-end flex-wrap">...</div>
