Source

Flex

Pagdumala dayon sa layout, pag-align, ug pagsukod sa mga kolum sa grid, nabigasyon, mga sangkap, ug uban pa nga adunay bug-os nga suite sa responsive flexbox utilities. Para sa mas komplikado nga mga pagpatuman, ang custom CSS mahimong gikinahanglan.

I-enable ang flex behavior

Gamita displayang mga utilities sa paghimo og flexbox nga sudlanan ug pagbag-o sa direkta nga mga elemento sa mga bata ngadto sa flex item. Ang mga sulud nga sulud ug mga butang mahimo’g mabag-o pa nga adunay dugang nga mga kabtangan sa pag-flex.

Ako usa ka flexbox nga sudlanan!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Usa ko ka inline nga flexbox nga sudlanan!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Anaa usab ang responsive nga mga kalainan alang sa .d-flexug .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

Ibutang ang direksyon sa flex nga mga butang sa usa ka flex nga sudlanan nga adunay mga gamit sa direksyon. Sa kadaghanan nga mga kaso mahimo nimong laktawan ang pinahigda nga klase dinhi tungod kay ang default sa browser mao ang row. Bisan pa, mahimo nimong masugatan ang mga sitwasyon diin kinahanglan nimo nga klaro nga itakda kini nga kantidad (sama sa mga responsive nga layout).

Gamita .flex-rowsa pagtakda og pinahigda nga direksyon (ang browser default), o .flex-row-reversesa pagsugod sa pinahigda nga direksyon gikan sa atbang nga kilid.

Flex nga butang 1
Flex nga butang 2
Flex nga butang 3
Flex nga butang 1
Flex nga butang 2
Flex nga butang 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>

Gamita .flex-columnsa pagtakda ug bertikal nga direksyon, o .flex-column-reversesa pagsugod sa bertikal nga direksyon gikan sa atbang nga bahin.

Flex nga butang 1
Flex nga butang 2
Flex nga butang 3
Flex nga butang 1
Flex nga butang 2
Flex nga butang 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>

Anaa usab ang responsive nga mga kalainan alang 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

Tarong ang sulod

Gamita justify-contentang mga utilities sa mga sudlanan sa flexbox aron usbon ang pag-align sa mga butang nga flex sa main axis (ang x-axis nga magsugod, y-axis kung flex-direction: column). Pagpili gikan sa start(mga default sa browser), end, center, between, o around.

Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<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>

Anaa usab ang responsive nga mga kalainan alang 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 butang

Gamita align-itemsang mga utilities sa mga sudlanan sa flexbox aron usbon ang pag-align sa mga butang nga flex sa cross axis (ang y-axis nga magsugod, x-axis kung flex-direction: column). Pagpili gikan sa start, end, center, baseline, o stretch(default sa browser).

Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<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>

Anaa usab ang responsive nga mga kalainan alang 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

I-align ang kaugalingon

Gamita align-selfang mga utilities sa flexbox nga mga butang aron tagsa-tagsa nga usbon ang ilang alignment sa cross axis (ang y-axis nga magsugod, x-axis kung flex-direction: column). Pagpili gikan sa parehas nga mga kapilian sama sa align-items: start, end, center, baseline, o stretch(default sa browser).

Flex nga butang
Na-align nga flex item
Flex nga butang
Flex nga butang
Na-align nga flex item
Flex nga butang
Flex nga butang
Na-align nga flex item
Flex nga butang
Flex nga butang
Na-align nga flex item
Flex nga butang
Flex nga butang
Na-align nga flex item
Flex nga butang
<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>

Anaa usab ang responsive nga mga kalainan alang 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

Pun-a

Gamita ang .flex-fillklase sa sunod-sunod nga mga elemento sa mga igsoon aron pugson sila sa managsama nga gilapdon samtang gikuha ang tanan nga magamit nga pinahigda nga wanang. Labi nga mapuslanon alang sa parehas nga gilapdon, o makatarunganon, nabigasyon.

Flex nga butang
Flex nga butang
Flex nga butang
<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>

Anaa usab ang responsive nga mga kalainan alang sa flex-fill.

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

Motubo ug mokunhod

Gamita .flex-grow-*ang mga utilities aron i-toggle ang abilidad sa usa ka flex item nga motubo aron mapuno ang magamit nga wanang. Sa panig-ingnan sa ubos, ang mga .flex-grow-1elemento naggamit sa tanan nga magamit nga espasyo nga mahimo niini, samtang gitugotan ang nahabilin nga duha nga mga butang nga i-flex ang ilang kinahanglan nga wanang.

Flex nga butang
Flex nga butang
Ikatulo nga 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>

Gamita .flex-shrink-*ang mga utilities aron i-toggle ang abilidad sa usa ka flex nga butang nga mokunhod kung gikinahanglan. Sa panig-ingnan sa ubos, ang ikaduha nga flex item nga adunay .flex-shrink-1napugos sa pagputos sa mga sulod niini ngadto sa usa ka bag-ong linya, "pag-us-os" sa pagtugot sa dugang nga luna alang sa miaging flex item uban sa .w-100.

Flex nga butang
Flex nga butang
<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>

Anaa usab ang responsive nga mga kalainan alang sa flex-growug 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

Ang Flexbox makahimo og pipila ka nindot nga mga butang kung imong gisagol ang mga flex alignment sa mga auto margin. Gipakita sa ubos ang tulo ka mga pananglitan sa pagkontrol sa mga butang nga flex pinaagi sa mga auto margin: default (walay auto margin), pagduso sa duha ka mga butang sa tuo ( .mr-auto), ug pagduso sa duha ka mga butang sa wala ( .ml-auto).

Ikasubo, ang IE10 ug IE11 dili husto nga nagsuporta sa mga auto margin sa mga flex nga butang kansang ginikanan adunay dili default justify-contentnga kantidad. Tan-awa kining StackOverflow nga tubag alang sa dugang mga detalye.

Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<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>

Uban sa align-item

Patindog nga ibalhin ang usa ka flex nga butang ngadto sa ibabaw o ubos sa sudlanan pinaagi sa pagsagol sa align-items, flex-direction: column, ug margin-top: autoo margin-bottom: auto.

Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<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>

Pagputos

Usba kung giunsa pagputos ang mga butang nga flex sa usa ka flex nga sudlanan. Pagpili gikan sa walay wrapping sa tanan (ang browser default) uban sa .flex-nowrap, wrapping uban sa .flex-wrap, o reverse wrapping uban sa .flex-wrap-reverse.

Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<div class="d-flex flex-nowrap">
  ...
</div>
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<div class="d-flex flex-wrap">
  ...
</div>
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Anaa usab ang responsive nga mga kalainan alang 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

Pag-order

Usba ang biswal nga han-ay sa piho nga flex nga mga butang nga adunay pipila ka mga orderutilities. Naghatag lang kami og mga kapilian sa paghimo sa usa ka butang nga una o katapusan, ingon man usa ka pag-reset aron magamit ang order sa DOM. Sama ordersa gikinahanglan sa bisan unsang integer nga bili (pananglitan, 5), idugang ang custom CSS alang sa bisan unsang dugang nga mga bili nga gikinahanglan.

Unang flex item
Ikaduha nga flex item
Ikatulo nga 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>

Anaa usab ang responsive nga mga kalainan alang 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 sulod

Gamita align-contentang mga utilities sa mga sudlanan sa flexbox aron i-align ang mga butang nga mag- uban sa cross axis. Pagpili gikan sa start(mga default sa browser), end, center, between, around, o stretch. Aron ipakita kini nga mga gamit, among gipatuman flex-wrap: wrapug gipadaghan ang gidaghanon sa mga butang nga flex.

Taas ang ulo! Kini nga kabtangan walay epekto sa usa ka laray sa flex nga mga butang.

Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<div class="d-flex align-content-end flex-wrap">...</div>
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<div class="d-flex align-content-center flex-wrap">...</div>
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<div class="d-flex align-content-between flex-wrap">...</div>
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<div class="d-flex align-content-around flex-wrap">...</div>
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
Flex nga butang
<div class="d-flex align-content-stretch flex-wrap">...</div>

Anaa usab ang responsive nga mga kalainan alang 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