Source

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.

Paganahin ang mga flex na pag-uugali

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.

Ako ay lalagyan ng flexbox!

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

Isa akong inline na lalagyan ng flexbox!

<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

Direksyon

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.

I-flex ang item 1

I-flex ang item 2

I-flex ang item 3

I-flex ang item 1

I-flex ang item 2

I-flex ang item 3

<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.

I-flex ang item 1

I-flex ang item 2

I-flex ang item 3

I-flex ang item 1

I-flex ang item 2

I-flex ang item 3

<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

Pangatwiranan ang nilalaman

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.

I-flex ang item

<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

I-align ang mga item

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).

I-flex ang item

<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

Ihanay ang sarili

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).

I-flex ang item

Naka-align na flex item

I-flex ang item

Naka-align na flex item

I-flex ang item

Naka-align na flex item

I-flex ang item

Naka-align na flex item

I-flex ang item

Naka-align na flex item

I-flex ang item

<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

Punan

Gamitin ang .flex-fillklase sa isang serye ng magkakapatid na elemento upang pilitin ang mga ito sa mga lapad na katumbas ng kanilang nilalaman (o mga pantay na lapad kung ang kanilang nilalaman ay hindi lalampas sa kanilang mga border-box) habang ginagamit ang lahat ng magagamit na pahalang na espasyo.

I-flex ang item na may maraming nilalaman

I-flex ang item

<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>

Umiiral din ang mga tumutugong variation para sa flex-fill.

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill

Lumaki at lumiit

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.

I-flex ang item

Pangatlong flex item

<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.

I-flex ang item

<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

Auto margin

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 StackOverflow na sagot na ito para sa higit pang mga detalye.

I-flex ang item

<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>

Sa align-item

Patayong 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.

I-flex ang item

<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>

Balutin

Baguhin kung paano bumabalot ang mga flex na item sa isang flex container. 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.

I-flex ang item

<div class="d-flex flex-nowrap">
  ...
</div>

I-flex ang item

<div class="d-flex flex-wrap">
  ...
</div>

I-flex ang item

<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

Umorder

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.

Unang flex item

Pangalawang flex item

Pangatlong flex item

<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

I-align ang nilalaman

Gumamit align-contentng mga utility sa mga lalagyan ng flexbox upang ihanay ang mga bagay na flex 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.

I-flex ang item

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

I-flex ang item

<div class="d-flex align-content-end flex-wrap">...</div>

I-flex ang item

<div class="d-flex align-content-center flex-wrap">...</div>

I-flex ang item

<div class="d-flex align-content-between flex-wrap">...</div>

I-flex ang item

<div class="d-flex align-content-around flex-wrap">...</div>

I-flex ang item

<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