Holo i ka ʻike nui Holo i ka hoʻokele docs

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
  • .d-xxl-flex
  • .d-xxl-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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-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, around, a i ʻole evenly.

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
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>
<div class="d-flex justify-content-evenly">...</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-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

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
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-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, 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
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

Hoʻopiha

E hoʻohana i ka .flex-fillpapa ma nā ʻano mea kaikaina e hoʻoikaika iā lākou i nā laula e like me kā lākou ʻike (a i ʻole nā ​​laula like inā ʻaʻole ʻoi aku ka nui o kā lākou ʻike ma mua o ko lākou mau pahu palena) ʻoiai e lawe ana i nā wahi ākea āpau.

Mea hoʻololi me ka nui o ka ʻike
Mea hoʻololi
Mea hoʻololi
<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>

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

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-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 nā wahi i loaʻa. Ma ka laʻana ma lalo nei, .flex-grow-1hoʻohana nā mea i nā wahi āpau i hiki iā ia, ʻoiai e ʻae ana i nā mea hoʻololi ʻelua 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. Ma ka laʻana ma lalo nei, .flex-shrink-1ua koi ʻia ka mea hoʻololi ʻelua me ke kāʻei ʻana i kāna mea i loko o kahi laina hou, "e emi ana" e ʻae i ka nui o ka manawa no ka mea hoʻololi 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
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{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 ( .me-auto), a me ka pahu ʻana i ʻelua mau mea i ka hema ( .ms-auto).

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="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 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
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-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 helu mai ka 0 a i ka 5, e 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-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

Eia kekahi, aia nā papa pane .order-firsta me .order-lastnā papa e hoʻololi i ke ʻano ordero kahi mea ma ke noi ʻana order: -1a me order: 6, kēlā me kē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

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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

Mea hoʻolaha

Ke ʻimi nei e hoʻopili hou i ka ʻāpana mea media mai Bootstrap 4? E hana hou i loko o ka manawa me kekahi mau mea hoʻohana maʻalahi e ʻae i ka maʻalahi a me ka hana maʻamau ma mua o ka wā ma mua.

Placeholder Image
ʻO kēia kekahi maʻiʻo mai kahi ʻāpana media. Hiki iā ʻoe ke hoʻololi i kēia me kekahi ʻike a hoʻoponopono iā ia e like me ka mea e pono ai.
<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>

A e ʻōlelo ʻoe makemake e hoʻokaʻawale i ka ʻike ma ka ʻaoʻao o ke kiʻi:

Placeholder Image
ʻO kēia kekahi maʻiʻo mai kahi ʻāpana media. Hiki iā ʻoe ke hoʻololi i kēia me kekahi ʻike a hoʻoponopono iā ia e like me ka mea e pono ai.
<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 no nā pono hana

Hōʻike ʻia nā pono pono Flexbox i kā mākou API ponoʻī ma scss/_utilities.scss. E aʻo pehea e hoʻohana ai i nā pono 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,
      ),
    ),