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.
<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>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.d-xxl-flex.d-xxl-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.
<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.
<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.flex-xxl-row.flex-xxl-row-reverse.flex-xxl-column.flex-xxl-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, around, o 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>
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-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
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).
<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.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-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).
<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.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-stretch
Pun-a
Gamita ang .flex-fillklase sa sunod-sunod nga mga elemento sa mga igsoon aron pugson sila ngadto sa gilapdon nga katumbas sa ilang sulod (o patas nga gilapdon kon ang ilang sulod dili molapas sa ilang mga border-boxes) samtang gikuha ang tanang anaa nga pinahigda nga luna.
<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>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.flex-xxl-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.
<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.
<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.flex-xxl-{grow|shrink}-0.flex-xxl-{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 ( .me-auto), ug pagduso sa duha ka mga butang sa wala ( .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>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.
<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.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<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.flex-xxl-nowrap.flex-xxl-wrap.flex-xxl-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 pagkuha sa bisan unsang integer nga kantidad gikan sa 0 hangtod 5, idugang ang naandan nga CSS alang sa bisan unsang dugang nga kantidad nga gikinahanglan.
<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-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
Dugang pa, adunay usab mga responsive .order-firstug .order-lastmga klase nga nagbag-o ordersa usa ka elemento pinaagi sa pag-apply order: -1ug order: 6, matag usa.
.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
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.
<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>
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.align-content-xxl-start.align-content-xxl-end.align-content-xxl-center.align-content-xxl-around.align-content-xxl-stretch
Media object
Nangita nga kopyahon ang sangkap sa media object gikan sa Bootstrap 4? Buhata kini pag-usab sa dali nga panahon gamit ang pipila ka mga flex utilities nga nagtugot sa labi pa nga pagka-flexible ug pag-customize kaysa kaniadto.
<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>Ug ingna nga gusto nimo nga isentro nga patayo ang sulud sunod sa imahe:
<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
Utilities API
Ang Flexbox utilities gideklarar sa among utilities API sa scss/_utilities.scss. Pagkat-on unsaon paggamit ang mga utilities 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,
),
),