Source

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">I'm a flexbox container!</div>
He ipu pouaka whakararangi au!
<div class="d-inline-flex p-2">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

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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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

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). Whiriwhiria mai i start(kaitirotiro taunoa), end, center, between, ranei around.

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>

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

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

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

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 ( .mr-auto), me te pana i nga mea e rua ki te maui ( .ml-auto).

Kia aroha mai, karekau te IE10 me te IE11 e tautoko tika i nga tawhē aunoa i runga i nga taonga ngawari he justify-contentuara kore-taunoa to te matua. Tirohia tenei whakautu StackOverflow mo etahi atu taipitopito.

Tuemi takahuri
Tuemi takahuri
Tuemi takahuri
Tuemi takahuri
Tuemi takahuri
Tuemi takahuri
Tuemi takahuri
Tuemi takahuri
Tuemi takahuri
<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">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" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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

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. Ka rite orderki te tango i tetahi uara tauoti (hei tauira, 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">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

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

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