Iparayag

Napardas nga imanehar ti layout, panagtunos, ken panagdakkel dagiti adigi ti grid, nabigasion, dagiti paset, ken dadduma pay babaen ti naan-anay a suite dagiti makasungbat a flexbox a utilidad. Para kadagiti ad-adu a komplikado nga implementasion, mabalin a kasapulan ti kostumbre a CSS.

Iti daytoy a panid

Pagbalinen a flex dagiti kababalin

Iyaplikar displaydagiti utilidad tapno mangpartuat ti flexbox a pagkargaan ken mangbalbaliw kadagiti direkta nga elemento dagiti ubbing kadagiti flex a banag. Dagiti flex container ken dagiti banag ket mabalin a mabaliwan pay babaen dagiti kanayonan a flex properties.

Siak ti maysa a flexbox container!

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

Maysaak nga inline flexbox container!

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

Adda met dagiti makasungbat a panagduduma para .d-flexken .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

Direksion

Itakderan ti direksion dagiti flex items iti flex container nga addaan kadagiti direction utilities. Iti kaaduan a kaso mabalinmo a liklikan ti horisontal a klase ditoy a kas ti default ti browser ket row. Nupay kasta, mabalin a makasabetka kadagiti kasasaad a kasapulam a nalawag nga ikeddeng daytoy a pateg (kas dagiti sumungbat a layout).

Usaren .flex-rowtapno mangikeddeng ti horizontal a direksion (ti default ti browser), wenno .flex-row-reversetapno rugian ti horizontal a direksion manipud iti kasumbangir a sikigan.

Flex nga aytem 1

Flex nga aytem 2

Flex nga aytem 3

Flex nga aytem 1

Flex nga aytem 2

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

Usaren .flex-columna mangikeddeng iti bertikal a direksion, wenno .flex-column-reversetapno rugian ti bertikal a direksion manipud iti kasungani a sikigan.

Flex nga aytem 1

Flex nga aytem 2

Flex nga aytem 3

Flex nga aytem 1

Flex nga aytem 2

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

Adda met dagiti sungbat a panagduduma para iti 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

Ikalintegan ti linaon

Usaren justify-contentdagiti utilidad kadagiti pagkargaan ti flexbox tapno baliwan ti panagtunos dagiti banag ti flex iti kangrunaan nga ehe (ti x-aksis a mangrugi, y-aksis no flex-direction: column). Pilien manipud iti start(default ti browser), end, center, between, around, wenno evenly.

Flex nga aytem

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

Adda met dagiti sungbat a panagduduma para iti 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

Itunos dagiti banag

Usaren align-itemsdagiti utilidad kadagiti pagkargaan ti flexbox tapno baliwan ti panagtunos dagiti banag ti flex iti krus nga ehe (ti y-aksis a mangrugi, x-aksis no flex-direction: column). Pilien manipud iti start, end, center, baseline, wenno stretch(default ti browser).

Flex nga aytem

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

Adda met dagiti sungbat a panagduduma para iti 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

Itunos ti bagi

Usaren align-selfdagiti utilidad kadagiti banag ti flexbox tapno saggaysa a baliwan ti panagtunosda iti krus nga ehe (ti y-aksis a mangrugi, x-aksis no flex-direction: column). Pilien manipud kadagiti isu met laeng a pagpilian a kas ti align-items: start, end, center, baseline, wenno stretch(default ti browser).

Flex nga aytem

Naitunos nga flex nga item

Flex nga aytem

Naitunos nga flex nga item

Flex nga aytem

Naitunos nga flex nga item

Flex nga aytem

Naitunos nga flex nga item

Flex nga aytem

Naitunos nga flex nga item

Flex nga aytem

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

Adda met dagiti sungbat a panagduduma para iti 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

Kargaan

Usaren ti .flex-fillklase iti serye dagiti agkakabsat nga elemento tapno piliten dagitoy kadagiti kalawa a kapada ti linaonda (wenno agpapada a kalawa no ti linaonda ket saan a lumablabas kadagiti border-box-da) bayat nga alaen amin a magun-od a horisontal nga espasio.

Flex item nga adu ti linaonna

Flex nga aytem

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

Adda met dagiti sungbat a panagduduma para iti flex-fill.

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

Dumakkel ken bumassit

Usaren .flex-grow-*dagiti utilidad tapno i-toggle ti abilidad ti flex item a dumakkel tapno punnuenna ti magun-od nga espasio. Iti pagarigan iti baba, dagiti .flex-grow-1elemento ket agus-usar kadagiti amin a magun-od nga espasio a mabalinna, bayat a mangipalubos kadagiti nabati a dua a flex a banag ti kasapulan nga espasioda.

Flex nga aytem

Maikatlo a flex nga 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>

Usaren .flex-shrink-*dagiti utilities tapno mai-toggle ti abilidad ti flex item nga ag-shrink no kasapulan. Iti pagarigan iti baba, ti maikadua a flex item with .flex-shrink-1ket mapilitan a mangbalkot kadagiti linaonna iti baro a linia, a “bumasbassit” tapno mangipalubos iti ad-adu nga espasio para iti napalabas a flex item nga addaan iti .w-100.

Flex nga aytem

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

Adda met dagiti makasungbat a panagduduma para flex-growken 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 nga mga margin

Mabalin nga aramiden ti Flexbox ti sumagmamano a medyo nakaam-amak a banag no ilaokmo dagiti flex alignments kadagiti auto margins. Naipakita iti baba ti tallo a pagarigan ti panangkontrol kadagiti flex a banag babaen kadagiti auto margin: default (awan ti auto margin), panangiduron iti dua a banag iti kannawan ( .me-auto), ken panangiduron iti dua a banag iti kannigid ( .ms-auto).

Flex nga aytem

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

Adda dagiti align-items

Bertikal nga iyakar ti maysa a flex item iti ngato wenno baba ti maysa a pagkargaan babaen ti pananglaok iti align-items, flex-direction: column, ken margin-top: autowenno margin-bottom: auto.

Flex nga aytem

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

Bungonen

Baliwan no kasano a mabalkot dagiti flex items iti flex container. Pilien manipud iti awan a pulos a panagbalkot (ti default ti browser) nga addaan iti .flex-nowrap, panagbalkot babaen ti .flex-wrap, wenno baliktad ti panagbalkot babaen ti .flex-wrap-reverse.

Flex nga aytem

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

Flex nga aytem

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

Flex nga aytem

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

Adda met dagiti sungbat a panagduduma para iti 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

Ipaipaw-it

Baliwan ti visual order dagiti espesipiko a flex items babaen ti sumagmamano a orderutilities. Mangipaaykami laeng kadagiti pagpilian para iti panagaramid ti maysa a banag nga umuna wenno maudi, kasta met ti panag-reset tapno mausar ti DOM nga order. Kas ordermangala ti ania man nga intero a pateg manipud iti 0 aginggana ti 5, manginayon ti kostumbre a CSS para iti ania man a kanayonan a pateg a kasapulan.

Umuna nga flex item

Maikadua a flex item

Maikatlo a flex nga 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>

Adda met dagiti sungbat a panagduduma para iti 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

Mainayon pay adda pay dagiti responsive .order-firstken .order-lastdagiti klase a mangbalbaliw ti orderti maysa nga elemento babaen ti panangipakat order: -1ken order: 6, a nagsasaruno.

.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

Itunos ti linaon

Usaren align-contentdagiti utilidad kadagiti flexbox a pagkargaan tapno maitunos dagiti flex a banag a sangsangkamaysa iti krus nga ehe. Pilien manipud iti start(default ti browser), end, center, between, around, wenno stretch. Tapno maipakita dagitoy a utilidad, impatungpal flex-wrap: wrapken pinaadumi ti bilang dagiti flex items.

Ulo nga agpangato! Daytoy a tagikua ket awan ti epektona kadagiti agmaymaysa a hilera dagiti flex a banag.

Flex nga aytem

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

Flex nga aytem

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

Flex nga aytem

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

Flex nga aytem

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

Flex nga aytem

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

Flex nga aytem

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

Adda met dagiti sungbat a panagduduma para iti 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

Bagay ti media

Agsapsapulka kadi a mangtulad ti paset ti banag ti media manipud iti Bootstrap 4? Mangparnuay manen iti dayta iti apagbiit babaen ti sumagmamano a flex utilities a mangipalubos iti ad-adu pay a flexibility ken customization ngem idi.

Daytoy ket sumagmamano a linaon manipud iti maysa a paset ti media. Mabalinmo a sukatan daytoy iti aniaman a linaon ken ilintegmo dayta no kasapulan.

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

Ket ibagam a kayatmo a bertikal nga isentro ti linaon iti abay ti ladawan:

Daytoy ket sumagmamano a linaon manipud iti maysa a paset ti media. Mabalinmo a sukatan daytoy iti aniaman a linaon ken ilintegmo dayta no kasapulan.

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

API dagiti utilidad

Dagiti utilidad ti Flexbox ket naideklara kadagiti utilidadmi nga API iti scss/_utilities.scss. Ammuem no kasano nga usaren ti 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,
      ),
    ),