Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
in English

Takahuri

Kia tere te whakahaere i te tahora, te tirohanga, me te rahi o nga pou matiti, te whakatere, nga waahanga, me etahi atu mea me te huinga katoa o nga taputapu flexbox whakautu. Mo nga whakatinanatanga uaua ake, ka tika pea te CSS ritenga.

Whakahohehia nga whanonga ngawari

Hoatu displaynga taputapu ki te hanga i tetahi ipu flexbox me te huri tika i nga huānga tamariki ki nga taonga ngawari. Ko nga ipu me nga taonga ka taea te whakarereke me etahi atu taonga ngawari.

He ipu flexbox ahau!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
He ipu pouaka whakararangi au!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

He rereke ano te whakautu mo .d-flexa .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

Te aronga

Whakatakotoria te ahunga o nga taonga ngawari ki roto i te ipu ngawari me nga taputapu ahunga. I te nuinga o nga wa ka taea e koe te whakakore i te karaehe whakapae i konei na te mea ko te taunoa o te kaitirotiro row. Heoi, ka tupono pea koe ki nga ahuatanga e hiahia ana koe ki te whakatakoto i tenei uara (penei i nga whakatakotoranga urupare).

Whakamahia .flex-rowhei tautuhi i te ahunga whakapae (te kaitirotiro taunoa), .flex-row-reversehei tiimata ranei i te ahunga whakapae mai i tera taha.

Tuemi Flex 1
Tuemi takahuri 2
Tuemi takahuri 3
Tuemi Flex 1
Tuemi takahuri 2
Tuemi takahuri 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>

Whakamahia .flex-columnki te tautuhi i te ahunga poutū, .flex-column-reverseki te timata ranei i te ahunga poutū mai i tera taha.

Tuemi Flex 1
Tuemi takahuri 2
Tuemi takahuri 3
Tuemi Flex 1
Tuemi takahuri 2
Tuemi takahuri 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>

He rerekee whakautu mo 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

Whakatikatika ihirangi

Whakamahia justify-contentnga taputapu i runga i nga ipu flexbox ki te huri i te tirohanga o nga mea ngawari ki te tuaka matua (te tuaka-x hei tiimata, te tuaka-y mena flex-direction: column). Kōwhiria mai i start(taunoa pūtirotiro), end, center, between, around, ranei evenly.

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

He rerekee whakautu mo 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

Tiaro tūemi

Whakamahia align-itemsnga taputapu i runga i nga ipu flexbox ki te huri i te tirohanga o nga mea ngawari ki runga i te tuaka whiti (te tuaka-y hei tiimata, te tuaka-x mena flex-direction: column). Kōwhiria mai i start, end, center, baseline, ranei stretch(kaitirotiro taunoa).

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

He rerekee whakautu mo 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

Whakaritea whaiaro

Whakamahia align-selfnga taputapu i runga i nga taonga pouaka flexbox ki te huri takitahi i te tiaroaro ki te tuaka ripeka (te tuaka-y hei tiimata, te tuaka-x mena flex-direction: column). Kōwhiria mai i ngā kōwhiringa rite align-items: start, end, center, baseline, ranei stretch(kaitirotiro taunoa).

Tuemi takahuri
Tuemi ngawari tirohia
Tuemi takahuri
Tuemi takahuri
Tuemi ngawari tirohia
Tuemi takahuri
Tuemi takahuri
Tuemi ngawari tirohia
Tuemi takahuri
Tuemi takahuri
Tuemi ngawari tirohia
Tuemi takahuri
Tuemi takahuri
Tuemi ngawari tirohia
Tuemi takahuri
<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>

He rerekee whakautu mo 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

Whakakiia

Whakamahia te .flex-fillkaraehe i runga i te raupapa o nga huānga teina ki te akiaki ia ratou ki te whanui e rite ana ki o raatau ihirangi (he rite ranei te whanui ki te kore e nui ake o raatau ihirangi i o raatau pouaka-taitapa) me te tango i nga waahi whakapae katoa.

Tuemi Flex me te maha o nga ihirangi
Tuemi takahuri
Tuemi takahuri
<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>

He rerekee whakautu mo flex-fill.

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

Tupu me te mimiti

Whakamahia .flex-grow-*nga taputapu hei takahuri i te kaha o te mea ngawari ki te tipu ki te whakakii i nga waahi e waatea ana. I roto i te tauira i raro nei, ka .flex-grow-1whakamahia e nga huānga nga waahi katoa ka taea e ia, me te tuku i nga mea e rua kia ngawari ki te waahi e tika ana.

Tuemi takahuri
Tuemi takahuri
Tuatoru mea ngawari
<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>

Whakamahia .flex-shrink-*nga taputapu hei takahuri i te kaha o te mea ngawari ki te whakaheke mena e tika ana. I roto i te tauira i raro nei, ko te tuarua o nga mea ngawari me .flex-shrink-1te kaha ki te takai i ona ihirangi ki tetahi raina hou, "te whakaheke" kia nui ake te waahi mo te mea ngawari o mua me te .w-100.

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

He rereke ano te whakautu mo flex-growa 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

Tawhē Aunoa

Ka taea e Flexbox etahi mahi tino whakamataku ina whakakotahi koe i nga tirohanga ngawari me nga tawhē aunoa. E whakaatuhia ana i raro nei nga tauira e toru o te whakahaere i nga mea ngawari ma nga tawhē aunoa: taunoa (kaore he tawhē aunoa), te pana i nga mea e rua ki te taha matau ( .me-auto), me te pana i nga mea e rua ki te maui ( .ms-auto).

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

Me nga mea tiaro

Whakanuku poutū tetahi tuemi takahuri ki runga, ki raro ranei o te ipu ma te ranu align-items, flex-direction: column, me margin-top: autote ranei margin-bottom: auto.

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

takai

Hurihia te takai o nga taonga ngawari ki roto i te ipu ngawari. Kōwhirihia mai i te kore takai (te pūtirotiro taunoa) me te .flex-nowrap, te takai ki te .flex-wrap, te takai whakamuri ranei ki te .flex-wrap-reverse.

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

He rerekee whakautu mo 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

Ota

Hurihia te raupapa ataataorder o nga taonga ngawari me etahi taputapu. Ka whakarato noa matou i nga whiringa mo te hanga i tetahi mea i te tuatahi, i te whakamutunga ranei, me te tautuhi ano hei whakamahi i te ota DOM. I orderte tango i tetahi uara tauoti mai i te 0 ki te 5, taapirihia te CSS ritenga mo etahi atu uara e hiahiatia ana.

Tuemi ngawari tuatahi
Tuemi ngawari tuarua
Tuatoru mea ngawari
<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>

He rerekee whakautu mo 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

I tua atu he karaehe whakautu .order-firstme .order-lastnga karaehe ka huri i te orderahua o tetahi huānga ma te tono order: -1me te order: 6, ia.

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

Tiaro ihirangi

Whakamahia align-contentnga taputapu i runga i nga ipu pouaka takai hei whakatiaro tahi i nga mea whakapiko ki te tuaka ripeka. Kōwhiria mai i start(taunoa pūtirotiro), end, center, between, around, ranei stretch. Hei whakaatu i enei taputapu, kua whakamanahia flex-wrap: wrap, kua whakanuia e matou te maha o nga taonga ngawari.

Mahunga ake! Karekau he painga o tenei taonga ki nga rarangi kotahi o nga mea ngawari.

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

He rerekee whakautu mo 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

Ahanoa pāpāho

Kei te titiro ki te tarai i te waahanga ahanoa pāpāho mai i Bootstrap 4? Hangaia ano i roto i te wa poto me etahi taputapu ngawari e taea ai te ngawari me te whakarite ake i o mua.

Placeholder Image
Koinei etahi o nga ihirangi mai i tetahi waahanga pāpāho. Ka taea e koe te whakakapi i tenei ki tetahi ihirangi me te whakatika ina hiahiatia.
<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>

Me kii kei te pirangi koe ki te whakakotahi poutū te ihirangi ki te taha o te atahanga:

Placeholder Image
Koinei etahi o nga ihirangi mai i tetahi waahanga pāpāho. Ka taea e koe te whakakapi i tenei ki tetahi ihirangi me te whakatika ina hiahiatia.
<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

API taputapu

Ko nga taputapu Flexbox kua whakahuahia i roto i a maatau taputapu API i roto i scss/_utilities.scss. Akohia me pehea te whakamahi i nga taputapu 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,
      ),
    ),