Flex
Mabilis na pamahalaan ang layout, alignment, at sizing ng mga grid column, navigation, mga bahagi, at higit pa gamit ang isang buong hanay ng mga tumutugon na flexbox utilities. Para sa mas kumplikadong mga pagpapatupad, maaaring kailanganin ang custom na CSS.
Mag- apply displayng mga utility para gumawa ng flexbox container at gawing flex item ang mga direktang elemento ng bata . Ang mga flex na lalagyan at mga item ay maaaring mabago pa nang may karagdagang mga katangian ng flex.
<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>Umiiral din ang mga tumutugong variation para sa .d-flexat .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
Itakda ang direksyon ng mga flex na item sa isang flex container na may mga utility ng direksyon. Sa karamihan ng mga kaso maaari mong alisin ang pahalang na klase dito dahil ang default ng browser ay row. Gayunpaman, maaari kang makatagpo ng mga sitwasyon kung saan kailangan mong tahasang itakda ang value na ito (tulad ng mga tumutugong layout).
Gamitin .flex-rowupang magtakda ng pahalang na direksyon (ang default ng browser), o .flex-row-reverseupang simulan ang pahalang na direksyon mula sa kabaligtaran.
<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>Gamitin .flex-columnupang magtakda ng patayong direksyon, o .flex-column-reverseupang simulan ang patayong direksyon mula sa kabaligtaran.
<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>Umiiral din ang mga tumutugong variation para sa 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
Gumamit justify-contentng mga utility sa mga lalagyan ng flexbox upang baguhin ang pagkakahanay ng mga flex na item sa pangunahing axis (ang x-axis na magsisimula, y-axis kung flex-direction: column). Pumili mula sa start(default ng browser), end, center, between, o around.
<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>Umiiral din ang mga tumutugong variation para sa justify-content.
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around
Gumamit align-itemsng mga utility sa mga lalagyan ng flexbox upang baguhin ang pagkakahanay ng mga flex na item sa cross axis (ang y-axis upang magsimula, x-axis kung flex-direction: column). Pumili mula sa start, end, center, baseline, o stretch(default ng browser).
<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>Umiiral din ang mga tumutugong variation para sa 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
Gumamit align-selfng mga utility sa mga item ng flexbox upang isa-isang palitan ang kanilang pagkakahanay sa cross axis (ang y-axis na magsisimula, x-axis kung flex-direction: column). Pumili mula sa parehong mga opsyon bilang align-items: start, end, center, baseline, o stretch(default ng browser).
<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>Umiiral din ang mga tumutugong variation para sa 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
Gamitin ang .flex-fillklase sa isang serye ng magkakapatid na elemento upang pilitin ang mga ito sa pantay na lapad habang kinukuha ang lahat ng magagamit na pahalang na espasyo. Lalo na kapaki-pakinabang para sa pantay na lapad, o makatwiran, nabigasyon.
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>Umiiral din ang mga tumutugong variation para sa flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
Gumamit .flex-grow-*ng mga utility para i-toggle ang kakayahan ng isang flex item na lumaki para punan ang available na espasyo. Sa halimbawa sa ibaba, ginagamit ng mga .flex-grow-1elemento ang lahat ng magagamit na espasyo na maaari nitong, habang pinapayagan ang natitirang dalawang flex item sa kanilang kinakailangang espasyo.
<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>Gumamit .flex-shrink-*ng mga utility para i-toggle ang kakayahan ng isang flex item na lumiit kung kinakailangan. Sa halimbawa sa ibaba, ang pangalawang flex na item .flex-shrink-1ay napipilitang ibalot ang mga nilalaman nito sa isang bagong linya, "lumiliit" upang bigyang-daan ang mas maraming espasyo para sa nakaraang flex item na may .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>Umiiral din ang mga tumutugong variation para sa flex-growat 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
Magagawa ng Flexbox ang ilang magagandang bagay kapag pinaghalo mo ang mga flex alignment sa mga auto margin. Ipinapakita sa ibaba ang tatlong halimbawa ng pagkontrol sa mga flex na item sa pamamagitan ng mga auto margin: default (walang auto margin), pagtulak ng dalawang item sa kanan ( .mr-auto), at pagtutulak ng dalawang item sa kaliwa ( .ml-auto).
Sa kasamaang palad, hindi maayos na sinusuportahan ng IE10 at IE11 ang mga auto margin sa mga flex na item na ang magulang ay may hindi default na justify-contenthalaga. Tingnan ang sagot na ito ng StackOverflow para sa higit pang mga detalye.
<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="mr-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="ml-auto p-2 bd-highlight">Flex item</div>
</div>Patayo na ilipat ang isang flex na item sa itaas o ibaba ng isang lalagyan sa pamamagitan ng paghahalo ng align-items, flex-direction: column, at margin-top: autoo 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>Baguhin kung paano bumabalot ang mga flex na item sa isang flex na lalagyan. Pumili mula sa walang wrapping sa lahat (ang browser default) na may .flex-nowrap, wrapping na may .flex-wrap, o reverse wrapping na may .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>Umiiral din ang mga tumutugong variation para sa 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
Baguhin ang visual na pagkakasunud-sunod ng mga partikular na flex item na may ilang mga orderutility. Nagbibigay lamang kami ng mga opsyon para sa pag-una o huli ng isang item, pati na rin ang pag-reset upang magamit ang order ng DOM. Habang ordertumatagal ang anumang integer na halaga (hal. 5), magdagdag ng custom na CSS para sa anumang karagdagang mga halaga na kailangan.
<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>Umiiral din ang mga tumutugong variation para sa order.
.order-0.order-1.order-2.order-3.order-4.order-5.order-6.order-7.order-8.order-9.order-10.order-11.order-12.order-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-sm-6.order-sm-7.order-sm-8.order-sm-9.order-sm-10.order-sm-11.order-sm-12.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-md-6.order-md-7.order-md-8.order-md-9.order-md-10.order-md-11.order-md-12.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-lg-6.order-lg-7.order-lg-8.order-lg-9.order-lg-10.order-lg-11.order-lg-12.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xl-6.order-xl-7.order-xl-8.order-xl-9.order-xl-10.order-xl-11.order-xl-12
Gumamit align-contentng mga utility sa mga lalagyan ng flexbox upang ihanay ang mga bagay na baluktot nang magkasama sa cross axis. Pumili mula sa start(default ng browser), end, center, between, around, o stretch. Upang ipakita ang mga utility na ito, ipinatupad flex-wrap: wrapat dinagdagan namin ang bilang ng mga flex item.
Heads up! Walang epekto ang property na ito sa iisang row ng mga flex item.
<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>Umiiral din ang mga tumutugong variation para sa 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