Source

Fa'afoliga

Fa'atopetope le fa'atulagaina, fa'aogaina, ma le fa'avasegaina o koluma fa'asologa, fa'asagaga, vaega, ma isi mea fa'atasi ai ma se fa'aogaina atoatoa o mea fa'aoga flexbox tali. Mo faʻatinoga sili atu ona lavelave, atonu e manaʻomia le CSS masani.

Fa'aagaaga fa'aletonu

Fa'aoga displaymea aoga e fai ai se atigipusa flexbox ma fa'aliliu sa'o elemene tamaiti i ni mea fa'alelei. O koneteina ma mea e mafai ona toe fa'aleleia atili i mea fa'aopoopo fa'aopoopo.

O a'u o se pusa flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
O a'u o se atigipusa flexbox totonu!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

E iai fo'i suiga tali atu mo .d-flexma .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

Fa'atonuga

Seti le itu o mea fefiloi i totonu o se atigi pusa faʻatasi ai ma mea faʻaoga. I le tele o tulaga e mafai ona e aveese le vasega faalava iinei ona o le faaletonu ole browser ole row. Ae ui i lea, e mafai ona e feagai ma tulaga e te manaʻomia e faʻatulaga manino ai lenei tau (pei o faʻasologa tali).

Fa'aoga .flex-rowe seti ai se itu fa'ata'atia (le browser default), po'o .flex-row-reversele amata o le itu fa'asaga mai le isi itu.

Fuafua mea 1
Fuafua mea 2
Fuafua mea 3
Fuafua mea 1
Fuafua mea 2
Fuafua mea 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>

Fa'aoga .flex-columne seti ai se itu tu'usa'o, po'o .flex-column-reversele amataina o le itu sa'o mai le isi itu.

Fuafua mea 1
Fuafua mea 2
Fuafua mea 3
Fuafua mea 1
Fuafua mea 2
Fuafua mea 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>

O lo'o i ai fo'i suiga fa'afoliga 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

Fa'amaonia mataupu

Fa'aoga justify-contentmea fa'aoga i luga o pusa flexbox e sui ai le fa'aogaina o mea fa'afeso'ota'i i luga o le axis autu (x-axis e amata, y-axis pe afai flex-direction: column). Filifili mai start(le browser default), end, center, between, poʻo around.

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

O lo'o i ai fo'i suiga fa'afoliga 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

Fa'aoga mea

Fa'aaogā align-itemsmea fa'aoga ile pusa flexbox e sui ai le fa'aogaina o mea fa'aoga i luga ole koluse (o le y-axis e amata, x-axis pe a flex-direction: column). Filifili mai le start, end, center, baseline, po'o le stretch(fa'aoga le browser).

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

O lo'o i ai fo'i suiga fa'afoliga 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

Fa'asa'o oe lava

Fa'aoga align-selfmea fa'aoga i luga o mea flexbox e sui ta'ito'atasi ai lo latou fa'aogaina i luga o le koluse axis (o le y-axis e amata, x-axis pe afai flex-direction: column). Filifili mai filifiliga tutusa e pei o le align-items: start, end, center, baseline, poʻo stretch(faʻaoga le browser).

Fuafua mea
Fa'atonu mea fe'ai
Fuafua mea
Fuafua mea
Fa'atonu mea fe'ai
Fuafua mea
Fuafua mea
Fa'atonu mea fe'ai
Fuafua mea
Fuafua mea
Fa'atonu mea fe'ai
Fuafua mea
Fuafua mea
Fa'atonu mea fe'ai
Fuafua mea
<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>

O lo'o i ai fo'i suiga fa'afoliga 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

Faatumu

Fa'aoga le .flex-fillvasega i luga o se fa'asologa o elemene e fa'amalosi i latou i le lautele tutusa a'o fa'aoga uma avanoa fa'ata'atia. Aemaise lava le aoga mo le tutusa-lautele, poʻo le faʻamaonia, folauga.

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

O lo'o i ai fo'i suiga fa'afoliga mo flex-fill.

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

Tupu ma fa'aitiiti

Fa'aoga .flex-grow-*mea fa'aoga e fa'asolo ai se mea fa'alelei e mafai ona tupu e fa'atumu avanoa avanoa. I le faʻataʻitaʻiga o loʻo i lalo, .flex-grow-1e faʻaogaina e elemene avanoa avanoa uma e mafai, aʻo faʻatagaina mea faʻaopoopo e lua o loʻo totoe o latou avanoa talafeagai.

Fuafua mea
Fuafua mea
Lona tolu mea fetuutuunai
<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>

Fa'aoga .flex-shrink-*mea fa'aoga e sui ai se mea fa'alelei e mafai ona fa'aitiitia pe a mana'omia. I le fa'ata'ita'iga o lo'o i lalo, o le mea fa'apipi'i lona lua .flex-shrink-1o lo'o fa'amalosia e afifi mea o lo'o i totonu i se laina fou, "fa'aitiitia" e fa'ataga ai le tele o avanoa mo le mea fa'apipi'i muamua ma le .w-100.

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

E iai fo'i suiga tali atu mo flex-growma 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

Fa'ailoga ta'avale

E mafai e le Flexbox ona fai ni mea mata'utia pe a e fa'afefiloi fa'aoga fa'aoga fa'atasi ma laina ta'avale. O lo'o fa'aalia i lalo ni fa'ata'ita'iga se tolu o le fa'atonutonuina o mea fe'avea'i e ala i ta'otoga ta'avale: fa'aletonu (leai se laina ta'avale), tulei mea e lua i le taumatau ( .mr-auto), ma tulei mea e lua i le agavale ( .ml-auto).

O le mea e leaga ai, IE10 ma IE11 e le'o lelei le lagolagoina o laina ta'avale i luga o mea fa'alelei e leai se justify-contentaoga o latou matua. Va'ai le tali StackOverflow mo nisi fa'amatalaga.

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

Fa'atasi ai-aitema

Fa'atū sa'o se mea fe'ai se tasi i le pito i luga po'o le pito i lalo o se koneteina e ala i le fa'afefiloi o le align-items, flex-direction: column, ma margin-top: autole margin-bottom: auto.

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

afifi

Suia pe fa'afefea ona afifi aitema fe'avea'i i totonu o se atigi pusa. Filifili mai le leai o se afifiina (le browser default) i le .flex-nowrap, afifi i le .flex-wrap, poʻo le fesuiaʻi afifi ile .flex-wrap-reverse.

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

O lo'o i ai fo'i suiga fa'afoliga 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

Poloaiga

Suia le fa'atonuga va'aia o mea fa'apitoa fa'afeso'ota'i fa'atasi ma nai ordermea aoga. Matou te tuʻuina atu filifiliga mo le faia o se mea muamua pe mulimuli, faʻapea foʻi ma le toe setiina e faʻaaoga ai le DOM order. Pe ordera mana'omia so'o se tau fa'atatau (fa'ata'ita'iga, 5), fa'aopoopo le CSS masani mo so'o se tau fa'aopoopo e mana'omia.

Muamua mea fetuutuunai
Mea fa'alelei lona lua
Lona tolu mea fetuutuunai
<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>

O lo'o i ai fo'i suiga fa'afoliga 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

Fa'aoga anotusi

Fa'aoga align-contentmea fa'aoga ile pusa flexbox e fa'aoga fa'atasi ai mea fa'apipi'i i luga ole koluse. Filifili mai start(le browser default), end, center, between, around, poʻo stretch. Ina ia faʻaalia nei mea aoga, ua matou faʻamalosia flex-wrap: wrapma faʻateleina le numera o mea faʻapipiʻi.

Ulu i luga! O lenei meatotino e leai se aoga i laina tasi o mea faʻapipiʻi.

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

O lo'o i ai fo'i suiga fa'afoliga 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