فلکس
با مجموعه کاملی از ابزارهای فلکسباکس واکنشگرا، طرحبندی، تراز و اندازه ستونهای شبکه، ناوبری، اجزا و موارد دیگر را به سرعت مدیریت کنید. برای پیاده سازی های پیچیده تر، CSS سفارشی ممکن است لازم باشد.
رفتارهای انعطاف پذیر را فعال کنید
از ابزارهای display
کاربردی برای ایجاد یک ظرف فلکس باکس و تبدیل عناصر مستقیم کودکان به آیتم های انعطاف پذیر استفاده کنید. ظروف و اقلام فلکس را می توان با ویژگی های انعطاف پذیر اضافی اصلاح کرد.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>
تغییرات پاسخگو نیز برای .d-flex
و وجود دارد .d-inline-flex
.
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
.d-xxl-flex
.d-xxl-inline-flex
جهت
جهت اقلام فلکس را در یک ظرف فلکس با ابزارهای جهت تنظیم کنید. در بیشتر موارد می توانید کلاس افقی را در اینجا حذف کنید زیرا پیش فرض مرورگر است row
. با این حال، ممکن است با موقعیتهایی مواجه شوید که نیاز به تنظیم صریح این مقدار داشته باشید (مانند طرحبندیهای واکنشگرا).
برای .flex-row
تنظیم یک جهت افقی (پیشفرض مرورگر)، یا .flex-row-reverse
برای شروع جهت افقی از طرف مقابل استفاده کنید.
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
برای .flex-column
تنظیم یک جهت عمودی یا .flex-column-reverse
برای شروع جهت عمودی از طرف مقابل استفاده کنید.
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
تغییرات پاسخگو نیز برای flex-direction
.
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse
مطالب را توجیه کنید
از justify-content
برنامه های کاربردی در ظروف فلکس باکس برای تغییر تراز اقلام فلکس در محور اصلی (محور x برای شروع، محور y اگر flex-direction: column
) استفاده کنید. از start
(پیش فرض مرورگر)،،،،، یا end
را انتخاب کنید .center
between
around
evenly
<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>
<div class="d-flex justify-content-evenly">...</div>
تغییرات پاسخگو نیز برای justify-content
.
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly
موارد را تراز کنید
از align-items
ابزارهای کاربردی در ظروف فلکس باکس برای تغییر تراز اقلام فلکس در محور متقاطع (محور y برای شروع، محور x اگر flex-direction: column
) استفاده کنید. از start
, end
, center
, baseline
یا stretch
(پیش فرض مرورگر) را انتخاب کنید.
<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-items
.
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch
خود را تراز کنید
از align-self
ابزارهای کاربردی در موارد flexbox استفاده کنید تا به صورت جداگانه تراز آنها را در محور متقاطع تغییر دهید (محور y برای شروع، محور x اگر flex-direction: column
). از میان گزینه های مشابه align-items
: start
، end
، center
، baseline
، یا stretch
(پیش فرض مرورگر) انتخاب کنید.
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
تغییرات پاسخگو نیز برای align-self
.
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch
پر کنید
از .flex-fill
کلاس روی یک سری از عناصر خواهر و برادر استفاده کنید تا آنها را به عرضی برابر با محتوایشان (یا عرض مساوی در صورتی که محتوای آنها از جعبه مرزی آنها فراتر نرود) وادار کنید در حالی که تمام فضای افقی موجود را اشغال می کنند.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>
تغییرات پاسخگو نیز برای flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-xxl-fill
رشد کنید و کوچک شوید
از .flex-grow-*
ابزارهای کمکی برای تغییر قابلیت رشد یک مورد انعطاف پذیر برای پر کردن فضای موجود استفاده کنید. در مثال زیر، .flex-grow-1
المانها از تمام فضای موجود استفاده میکنند، در حالی که به دو مورد باقیمانده اجازه میدهد که فضای لازم را انعطافپذیر کنند.
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Third flex item</div>
</div>
از .flex-shrink-*
ابزارهای کمکی برای تغییر دادن قابلیت کوچک شدن یک مورد انعطاف پذیر در صورت لزوم استفاده کنید. در مثال زیر، دومین مورد انعطافپذیر با .flex-shrink-1
مجبور است محتویات خود را در یک خط جدید بپیچد، «کوچک شود» تا فضای بیشتری برای آیتم انعطافپذیر قبلی با .w-100
.
<div class="d-flex bd-highlight">
<div class="p-2 w-100 bd-highlight">Flex item</div>
<div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>
تغییرات پاسخگو نیز برای flex-grow
و وجود دارد flex-shrink
.
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1
حاشیه های خودکار
وقتی ترازهای انعطاف پذیر را با حاشیه های خودکار ترکیب می کنید، Flexbox می تواند کارهای بسیار عالی انجام دهد. در زیر سه نمونه از کنترل آیتمهای انعطافپذیر از طریق حاشیه خودکار نشان داده شده است: پیشفرض (بدون حاشیه خودکار)، فشار دادن دو مورد به راست ( .me-auto
) و فشار دادن دو مورد به سمت چپ ( .ms-auto
).
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="me-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>
با تراز آیتم ها
align-items
با مخلوط کردن ، flex-direction: column
و margin-top: auto
یا ، یک مورد انعطاف پذیر را به صورت عمودی به بالا یا پایین ظرف margin-bottom: auto
منتقل کنید.
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>
بسته بندی کردن
نحوه بسته شدن اقلام فلکس را در یک ظرف فلکس تغییر دهید. از بین بدون بسته بندی (پیش فرض مرورگر) با .flex-nowrap
، بسته بندی با .flex-wrap
، یا بسته بندی معکوس با را .flex-wrap-reverse
انتخاب کنید.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
تغییرات پاسخگو نیز برای flex-wrap
.
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse
سفارش
ترتیب بصری اقلام فلکس خاص را با چند ابزار order
کاربردی تغییر دهید. ما فقط گزینه هایی را برای اولین یا آخرین مورد و همچنین بازنشانی برای استفاده از سفارش DOM ارائه می دهیم. همانطور که order
هر عدد صحیحی از 0 تا 5 را می گیرد، CSS سفارشی را برای هر مقدار اضافی مورد نیاز اضافه کنید.
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First flex item</div>
<div class="order-2 p-2 bd-highlight">Second flex item</div>
<div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>
تغییرات پاسخگو نیز برای order
.
.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5
علاوه بر این، کلاسهای واکنشگرا .order-first
و واکنشگرا نیز وجود دارند که با اعمال و به ترتیب، عنصر یک عنصر را تغییر میدهند..order-last
order
order: -1
order: 6
.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last
تراز کردن محتوا
از align-content
ابزارهای کاربردی در ظروف فلکس باکس برای تراز کردن موارد فلکس در محور متقاطع استفاده کنید. از start
(پیش فرض مرورگر)،،،،، یا 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>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<div class="d-flex align-content-stretch flex-wrap">...</div>
تغییرات پاسخگو نیز برای align-content
.
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-around
.align-content-xxl-stretch
شی رسانه ای
آیا به دنبال تکرار مولفه مدیا شی از Bootstrap 4 هستید؟ آن را در کمترین زمان با چند ابزار انعطاف پذیر که انعطاف پذیری و سفارشی سازی بیشتری را نسبت به قبل فراهم می کند، دوباره بسازید.
<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
و بگویید می خواهید محتوا را به صورت عمودی در کنار تصویر قرار دهید:
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
ساس
Utilities API
برنامه های کاربردی Flexbox در API ابزارهای ما در اعلان شده اند scss/_utilities.scss
. با نحوه استفاده از Utilities API آشنا شوید.
"flex": (
responsive: true,
property: flex,
values: (fill: 1 1 auto)
),
"flex-direction": (
responsive: true,
property: flex-direction,
class: flex,
values: row column row-reverse column-reverse
),
"flex-grow": (
responsive: true,
property: flex-grow,
class: flex,
values: (
grow-0: 0,
grow-1: 1,
)
),
"flex-shrink": (
responsive: true,
property: flex-shrink,
class: flex,
values: (
shrink-0: 0,
shrink-1: 1,
)
),
"flex-wrap": (
responsive: true,
property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse
),
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),
"align-items": (
responsive: true,
property: align-items,
values: (
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"align-content": (
responsive: true,
property: align-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
)
),
"align-self": (
responsive: true,
property: align-self,
values: (
auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
)
),
"order": (
responsive: true,
property: order,
values: (
first: -1,
0: 0,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
last: 6,
),
),