فليڪس
فوري طور تي ترتيب ڏيڻ، ترتيب ڏيڻ، ۽ گرڊ ڪالمن جي ماپ، نيويگيشن، اجزاء، ۽ وڌيڪ جوابي فلڪس باڪس يوٽيلٽيز جي مڪمل سوٽ سان. وڌيڪ پيچيده عملن لاء، ڪسٽم 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
مواد کي درست ڪريو
flexbox ڪنٽينرز تي يوٽيلٽيز استعمال ڪريو justify-content
مکيه محور تي flex شيون جي ترتيب کي تبديل ڪرڻ لاءِ (x-axis to start, y-axis if flex-direction: column
). مان چونڊيو start
(براؤزر ڊفالٽ)، end
, center
, between
, around
, or 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
شيون ترتيب ڏيو
flexbox ڪنٽينرز تي يوٽيلٽيز استعمال ڪريو align-items
ڪراس محور تي فليڪس شين جي ترتيب کي تبديل ڪرڻ لاءِ (شروع ڪرڻ لاءِ y-axis، x-axis if flex-direction: column
). مان چونڊيو start
, end
, , center
, baseline
, or stretch
(browser default).
<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-axis، x-axis if flex-direction: column
). ساڳين اختيارن مان چونڊيو جيئن align-items
: start
, end
, center
, , baseline
, or stretch
(browser default).
<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
. اسان صرف اختيار ڏيون ٿا ھڪڙي شيءِ ٺاهڻ لاءِ پھريون يا آخري، ۽ گڏوگڏ ڊوم آرڊر استعمال ڪرڻ لاءِ ري سيٽ. جيئن ته 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
flexbox ڪنٽينرز تي يوٽيلٽيز استعمال ڪريو فليڪس شيون گڏ ڪرڻ لاءِ ڪراس محور تي. مان چونڊيو start
(براؤزر ڊفالٽ)، end
, center
, between
, around
, or 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
ميڊيا اعتراض
بوٽ اسٽريپ 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>
ساس
يوٽيلٽيز API
Flexbox افاديت اسان جي يوٽيلٽيز API ۾ اعلان ڪيو ويو آهي scss/_utilities.scss
. سکو ته ڪيئن استعمال ڪجي يوٽيلٽيز 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,
),
),