Source

Flex

E hoʻokele wikiwiki i ka hoʻolālā, hoʻopololei, a me ka nui o nā kolamu grid, ka hoʻokele, nā ʻāpana, a me nā mea hou aʻe me kahi hui piha o nā pono flexbox pane. No nā hoʻokō paʻakikī, pono paha ka CSS maʻamau.

E ho'ā i nā ʻano hoʻololi

E displayhoʻohana i nā pono hana no ka hana ʻana i kahi pahu flexbox a hoʻololi i nā mea pono keiki i nā mea flex. Hiki ke hoʻololi hou ʻia nā ipu Flex a me nā mea me nā waiwai flex hou.

He pahu flexbox wau!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
He pahu flexbox au.
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Loaʻa nā ʻokoʻa pane no .d-flexa me .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

Kuhikuhi

E hoʻonoho i ke kuhikuhi o nā mea hoʻololi i loko o kahi pahu hoʻololi me nā pono kuhikuhi. I ka hapanui o nā hihia hiki iā ʻoe ke haʻalele i ka papa ākea ma ʻaneʻi e like me ka paʻamau o ka polokalamu kele pūnaewele row. Eia nō naʻe, hiki iā ʻoe ke hālāwai me nā kūlana kahi āu e pono ai e hoʻonohonoho pono i kēia waiwai (e like me nā hoʻonohonoho pane).

E hoʻohana .flex-rowno ka hoʻonohonoho ʻana i kahi ʻaoʻao ākea (ka polokalamu kele pūnaewele), a i ʻole .flex-row-reversee hoʻomaka i ka ʻaoʻao ʻaoʻao mai kēlā ʻaoʻao.

Mea hoʻololi 1
Mea hoʻololi 2
Mea hoʻololi 3
Mea hoʻololi 1
Mea hoʻololi 2
Mea hoʻololi 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>

E hoʻohana .flex-columnno ka hoʻonohonoho ʻana i kahi kuhikuhi pololei, a i ʻole .flex-column-reversee hoʻomaka i ka ʻaoʻao kū pololei mai kēlā ʻaoʻao.

Mea hoʻololi 1
Mea hoʻololi 2
Mea hoʻololi 3
Mea hoʻololi 1
Mea hoʻololi 2
Mea hoʻololi 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>

Loaʻa nā ʻokoʻa pane no 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

E hōʻoia i ka ʻike

E hoʻohana justify-contenti nā mea pono ma nā pahu flexbox e hoʻololi i ka alignment o nā mea flex ma ke axis nui (ke x-axis e hoʻomaka, y-axis inā flex-direction: column). E koho mai start(ka polokalamu kele pūnaewele), end, center, between, a i ʻole around.

Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<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>

Loaʻa nā ʻokoʻa pane no 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

Hoʻopololei i nā mea

E hoʻohana align-itemsi nā pono hana ma nā pahu pahu flex e hoʻololi i ka hoʻolikelike ʻana o nā mea flex ma ke axis kea (ke axis y e hoʻomaka, x-axis inā flex-direction: column). E koho mai start, end, center, baseline, a i ʻole stretch(ka polokalamu kele pūnaewele paʻamau).

Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<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>

Loaʻa nā ʻokoʻa pane no 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

Hoʻopololei iā ʻoe iho

E hoʻohana align-selfi nā mea pono ma nā mea flexbox e hoʻololi pakahi i ko lākou alignment ma ke axis kea (ke axis-y e hoʻomaka ai, x-axis inā flex-direction: column). E koho i nā koho like me align-items: start, end, center, baseline, a i ʻole stretch(ka mea hoʻohana paʻamau).

Mea hoʻololi
Ua hoʻopololei ʻia
Mea hoʻololi
Mea hoʻololi
Ua hoʻopololei ʻia
Mea hoʻololi
Mea hoʻololi
Ua hoʻopololei ʻia
Mea hoʻololi
Mea hoʻololi
Ua hoʻopololei ʻia
Mea hoʻololi
Mea hoʻololi
Ua hoʻopololei ʻia
Mea hoʻololi
<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>

Loaʻa nā ʻokoʻa pane no 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

Hoʻopiha

E hoʻohana i ka .flex-fillpapa ma ke ʻano o nā ʻano mea kaikunāne e koi aku iā lākou i nā laula like ʻoiai e lawe ana i nā wahi ākea āpau i loaʻa. Pono pono no ka hoʻokele like ʻana, a i ʻole ʻae ʻia.

Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<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>

Loaʻa nā ʻokoʻa pane no flex-fill.

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

E ulu a emi

E hoʻohana .flex-grow-*i nā pono hana no ka hoʻololi ʻana i kahi mea hiki ke ulu e hoʻopiha i kahi kūpono. Ma ka laʻana ma lalo nei, .flex-grow-1hoʻohana nā mea i nā wahi āpau e hiki ai iā ia, ʻoiai e ʻae ana i nā mea flex i koe i ko lākou wahi kūpono.

Mea hoʻololi
Mea hoʻololi
'ikamu flex kolu
<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>

E hoʻohana .flex-shrink-*i nā pono hana no ka hoʻololi ʻana i kahi mea hiki ke emi inā pono. .flex-shrink-1Ma ka laʻana ma lalo nei, ua koi ʻia ka lua o ka mea hoʻololi me ka wili ʻana i kona ʻike i kahi laina hou, "hōʻemi" no ka ʻae ʻana i kahi manawa hou aku no ka mea loli mua me .w-100.

Mea hoʻololi
Mea hoʻololi
<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>

Loaʻa nā ʻokoʻa pane no flex-growa me 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

Nā palena ʻakomi

Hiki i ka Flexbox ke hana i kekahi mau mea maikaʻi loa ke hoʻohui ʻoe i nā alignment flex me nā palena kaʻa. Hōʻike ʻia ma lalo nei ʻekolu mau laʻana o ka hoʻomalu ʻana i nā mea paʻakikī ma o nā palena kaʻa: paʻamau (ʻaʻohe palena kaʻa), kaomi ʻana i ʻelua mau mea i ka ʻākau ( .mr-auto), a me ka pahu ʻana i ʻelua mau mea i ka hema ( .ml-auto).

ʻO ka mea pōʻino, ʻaʻole kākoʻo pono ʻo IE10 a me IE11 i nā palena kaʻa ma nā mea flexi nona ka makua i ka justify-contentwaiwai paʻa ʻole. E ʻike i kēia pane StackOverflow no nā kikoʻī hou aku.

Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<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>

Me nā mea align-item

E hoʻoneʻe i hoʻokahi mea lohi i luna a i lalo paha o kahi pahu ma ka hui ʻana i align-items, flex-direction: column, a margin-top: autoi ʻole margin-bottom: auto.

Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<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>

Wāwī

E hoʻololi i ke ʻano o ka wili ʻana o nā mea paʻakikī i loko o kahi pahu lohi. E koho i ka ʻōwili ʻole ʻana (ka polokalamu kele pūnaewele paʻamau) me ka .flex-nowrap, ka ʻōwili ʻana me ka .flex-wrap, a i ʻole ka ʻōwili ʻana me ka .flex-wrap-reverse.

Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<div class="d-flex flex-nowrap">
  ...
</div>
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<div class="d-flex flex-wrap">
  ...
</div>
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Loaʻa nā ʻokoʻa pane no 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

Kauoha

E hoʻololi i ke ʻano hiʻohiʻona o nā mea kikoʻī me ka liʻiliʻi o ordernā pono hana. Hāʻawi wale mākou i nā koho no ka hana ʻana i kahi mea i mua a i ʻole hope, a me ka hoʻoponopono hou ʻana e hoʻohana i ke kauoha DOM. E like me orderka lawe ʻana i kekahi waiwai integer (e laʻa, 5), hoʻohui i ka CSS maʻamau no nā waiwai hou e pono ai.

ʻImi hoʻololi mua
ʻImi hoʻololi lua
'ikamu flex kolu
<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>

Loaʻa nā ʻokoʻa pane no 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

Hoʻopololei i ka ʻike

E hoʻohana align-contenti nā mea pono ma nā pahu pahu flexbox e hoʻopololei i nā mea flex i hui pū ma ke koʻi keʻa. E koho mai start(ka polokalamu kele pūnaewele), end, center, between, around, a i ʻole stretch. No ka hōʻike ʻana i kēia mau pono, ua hoʻokō mākou flex-wrap: wrapa hoʻonui i ka helu o nā mea flex.

Nā poʻo i luna! ʻAʻohe hopena o kēia waiwai i nā lālani hoʻokahi o nā mea loli.

Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<div class="d-flex align-content-end flex-wrap">...</div>
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<div class="d-flex align-content-center flex-wrap">...</div>
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<div class="d-flex align-content-between flex-wrap">...</div>
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<div class="d-flex align-content-around flex-wrap">...</div>
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
Mea hoʻololi
<div class="d-flex align-content-stretch flex-wrap">...</div>

Loaʻa nā ʻokoʻa pane no 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