Flex
Dhibiti kwa haraka mpangilio, upangaji na ukubwa wa safu wima za gridi, usogezaji, vipengee na mengine mengi ukitumia mkusanyiko kamili wa huduma za flexbox zinazojibika. Kwa utekelezaji changamano zaidi, CSS maalum inaweza kuhitajika.
Washa tabia za kubadilika
Tumia display
huduma ili kuunda kontena la flexbox na kubadilisha vipengele vya watoto moja kwa moja kuwa vipengee vya kunyumbulika . Vyombo vya Flex na vitu vinaweza kubadilishwa zaidi na sifa za ziada za kubadilika.
<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>
Tofauti za mwitikio pia zipo kwa .d-flex
na .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
Mwelekeo
Weka uelekeo wa vipengee vya kunyumbulika katika chombo cha kunyumbulika chenye huduma za mwelekeo. Katika hali nyingi unaweza kuacha darasa la mlalo hapa kwani chaguo-msingi la kivinjari ni row
. Hata hivyo, unaweza kukutana na hali ambapo ulihitaji kuweka thamani hii kwa uwazi (kama vile mipangilio inayoitikia).
Tumia .flex-row
kuweka mwelekeo mlalo (chaguo-msingi ya kivinjari), au .flex-row-reverse
kuanza mwelekeo mlalo kutoka upande wa pili.
<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>
Tumia .flex-column
kuweka mwelekeo wima, au .flex-column-reverse
kuanza mwelekeo wima kutoka upande wa pili.
<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>
Tofauti za mwitikio pia zipo kwa 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
Thibitisha maudhui
Tumia justify-content
huduma kwenye vyombo vya flexbox ili kubadilisha upangaji wa vipengee vinavyopinda kwenye mhimili mkuu (mhimili wa x kuanza, mhimili y ikiwa flex-direction: column
). Chagua kutoka start
(chaguo-msingi ya kivinjari), end
, center
, between
, around
, au 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>
Tofauti za mwitikio pia zipo kwa 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
Pangilia vitu
Tumia align-items
huduma kwenye vyombo vya flexbox kubadilisha mpangilio wa vipengee vinavyopinda kwenye mhimili mtambuka (mhimili y kuanza, x-mhimili ikiwa flex-direction: column
). Chagua kutoka start
, end
, center
, baseline
, au stretch
(chaguo-msingi ya kivinjari).
<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>
Tofauti za mwitikio pia zipo kwa 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
Jitengeneze
Tumia align-self
huduma kwenye vipengee vya flexbox ili kubadilisha mpangilio wao mmoja mmoja kwenye mhimili wa msalaba (mhimili y kuanza, x-mhimili ikiwa flex-direction: column
). Chagua kutoka kwa chaguo sawa na align-items
: start
, end
, center
, baseline
, au stretch
(chaguo-msingi ya kivinjari).
<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>
Tofauti za mwitikio pia zipo kwa 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
Jaza
Tumia .flex-fill
darasa kwenye msururu wa vipengee vya ndugu ili kuvilazimisha katika upana sawa na maudhui yao (au upana sawa ikiwa maudhui yao hayazidi visanduku vyao vya mpaka) huku ukichukua nafasi zote za mlalo zinazopatikana.
<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>
Tofauti za mwitikio pia zipo kwa flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-xxl-fill
Kukua na kupungua
Tumia .flex-grow-*
huduma kugeuza uwezo wa bidhaa kukua ili kujaza nafasi inayopatikana. Katika mfano hapa chini, .flex-grow-1
vipengele hutumia nafasi yote inayopatikana inaweza, huku kuruhusu vitu viwili vilivyobaki vya flex nafasi yao muhimu.
<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>
Tumia .flex-shrink-*
huduma kugeuza uwezo wa kipengee flexifu kupungua ikihitajika. Katika mfano ulio hapa chini, kipengee cha pili cha kunyumbua nacho kinalazimika .flex-shrink-1
kukunja yaliyomo kwenye mstari mpya, "kinapungua" ili kuruhusu nafasi zaidi kwa kipengee cha awali cha kunyumbua na .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>
Tofauti za mwitikio pia zipo kwa flex-grow
na 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
Pambizo otomatiki
Flexbox inaweza kufanya mambo ya kupendeza unapochanganya mipangilio inayonyumbulika na pambizo otomatiki. Inayoonyeshwa hapa chini ni mifano mitatu ya kudhibiti vipengee vinavyobadilika-badilika kupitia pambizo otomatiki: chaguo-msingi (hakuna ukingo otomatiki), kusukuma vipengee viwili kulia ( .me-auto
), na kusukuma vipengee viwili kushoto ( .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>
Pamoja na vitu vya kupanga
Sogeza kipengee kimoja kwa wima hadi juu au chini ya chombo kwa kuchanganya align-items
, flex-direction: column
na margin-top: auto
au 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>
Funga
Badilisha jinsi vipengee vinavyopindana hufungana kwenye chombo cha kukunja. Chagua kutoka kwa kutokufunga kabisa (chaguo-msingi ya kivinjari) na .flex-nowrap
, kufunga na .flex-wrap
, au kufungia kinyume na .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>
Tofauti za mwitikio pia zipo kwa 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
Agizo
Badilisha mpangilio wa kuona wa vipengee maalum vya kunyumbulika kwa kutumia order
huduma chache. Tunatoa tu chaguo za kutengeneza kipengee kwanza au mwisho, pamoja na kuweka upya ili kutumia agizo la DOM. Kama order
inavyochukua thamani kamili kutoka 0 hadi 5, ongeza CSS maalum kwa thamani zozote za ziada zinazohitajika.
<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>
Tofauti za mwitikio pia zipo kwa 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
Zaidi ya hayo kuna pia madarasa msikivu .order-first
na ambayo hubadilisha kipengele kwa kutumia na , mtawalia..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
Pangilia yaliyomo
Tumia align-content
huduma kwenye vyombo vya flexbox ili kupanga vitu pamoja kwenye mhimili mtambuka. Chagua kutoka start
(chaguo-msingi ya kivinjari), end
, center
, between
, around
, au stretch
. Ili kuonyesha huduma hizi, tumetekeleza flex-wrap: wrap
na kuongeza idadi ya vipengee vinavyobadilikabadilika.
Vichwa juu! Sifa hii haina athari kwa safu mlalo moja ya vitu vinavyobadilikabadilika.
<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>
Tofauti za mwitikio pia zipo kwa 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
Kitu cha media
Unatafuta kuiga kipengee cha kitu cha media kutoka Bootstrap 4? Iunde upya baada ya muda mfupi na huduma chache zinazobadilika ambazo huruhusu unyumbufu zaidi na ubinafsishaji kuliko hapo awali.
<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>
Na sema unataka kuweka wima katikati yaliyomo karibu na picha:
<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>
Sass
API ya Huduma
Huduma za Flexbox zinatangazwa katika API ya huduma zetu katika scss/_utilities.scss
. Jifunze jinsi ya kutumia API ya huduma.
"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,
),
),