Source

Flex

Gestite rapidamente u layout, l'allineamentu è a dimensione di e colonne di griglia, a navigazione, i cumpunenti è più cù una suite completa di utilità flexbox responsive. Per implementazioni più cumplesse, CSS persunalizati pò esse necessariu.

Abilita i cumpurtamenti flex

Applica displayutilità per creà un containeru flexbox è trasfurmà elementi diretti di i zitelli in articuli flex. I cuntenituri è l'articuli Flex ponu esse mudificate più cù proprietà flex supplementari.

Sò un containeru flexbox !
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Sò un containeru flexbox in linea!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Esistenu ancu variazioni rispunsevuli per .d-flexè .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

Direzzione

Pone a direzzione di l'articuli flex in un containeru flex cù utilità di direzzione. In a maiò parte di i casi, pudete omette a classa horizontale quì chì u navigatore predeterminatu hè row. Tuttavia, pudete scuntrà situazioni induve avete bisognu di stabilisce esplicitamente stu valore (cum'è layout responsive).

Aduprate .flex-rowper stabilisce una direzzione horizontale (u predeterminatu di u navigatore), o .flex-row-reverseper inizià a direzzione horizontale da u latu oppostu.

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

Aduprà .flex-columnper stabilisce una direzzione verticale, o .flex-column-reverseper inizià a direzzione verticale da u latu oppostu.

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

Ci sò ancu variazioni rispunsevuli per 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

Justificà u cuntenutu

Aduprate justify-contentl'utilità nantu à i cuntenituri di flexbox per cambià l'allineamentu di l'articuli flex nantu à l'assi principale (l'asse x per inizià, l'asse y si flex-direction: column). Sceglite da start(navigatore predeterminatu), end, center, between, o around.

Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
<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>

Ci sò ancu variazioni rispunsevuli per 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

Allineate l'articuli

Aduprate align-itemsl'utilità nantu à i cuntenituri di flexbox per cambià l'allineamentu di l'articuli flex nantu à l'asse trasversale (l'asse y per inizià, l'assi x se flex-direction: column). Scegli tra start, end, center, baseline, o stretch(navigatore predeterminatu).

Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
<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>

Ci sò ancu variazioni rispunsevuli per 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

Allineate sè stessu

Aduprate align-selfutilità nantu à l'articuli flexbox per cambià individualmente u so allinamentu nantu à l'asse trasversale (l'asse y per inizià, l'assi x se flex-direction: column). Sceglite trà e stesse opzioni cum'è align-items: start, end, center, baseline, o stretch(predefinitu di u navigatore).

Articulu Flex
Elementu flexu allineatu
Articulu Flex
Articulu Flex
Elementu flexu allineatu
Articulu Flex
Articulu Flex
Elementu flexu allineatu
Articulu Flex
Articulu Flex
Elementu flexu allineatu
Articulu Flex
Articulu Flex
Elementu flexu allineatu
Articulu Flex
<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>

Ci sò ancu variazioni rispunsevuli per 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

Pienu

Aduprate a .flex-fillclassa nantu à una seria di elementi di fratellu per furzà in larghezza uguali mentre occupanu tuttu u spaziu horizontale dispunibule. In particulare utile per a navigazione di uguale larghezza, o ghjustificata.

Articulu Flex
Articulu Flex
Articulu Flex
<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>

Ci sò ancu variazioni rispunsevuli per flex-fill.

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

Cresce è sminuisce

Aduprate l' .flex-grow-*utilità per commutà a capacità di un articulu flex per cresce per riempie u spaziu dispunibule. In l'esempiu quì sottu, l' .flex-grow-1elementi usanu tuttu u spaziu dispunibule chì ponu, mentre chì permettenu à i dui elementi flexi rimanenti u so spaziu necessariu.

Articulu Flex
Articulu Flex
Terzu articulu flex
<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>

Aduprate l' .flex-shrink-*utilità per commutà a capacità di un articulu flex per riduce se ne necessariu. In l'esempiu quì sottu, u sicondu articulu flex cù .flex-shrink-1hè furzatu à impannillarà u so cuntenutu in una nova linea, "riducindu" per permette più spaziu per l'elementu flex precedente cù .w-100.

Articulu Flex
Articulu Flex
<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>

Esistenu ancu variazioni rispunsevuli per flex-growè 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

Margini auto

Flexbox pò fà cose abbastanza fantastiche quandu mischjà l'allineamenti flex cù i margini auto. Quì sottu sò trè esempi di cuntrullà l'articuli flex via marghjini auto: predeterminatu (senza marghjini auto), spinghje dui elementi à a diritta ( .mr-auto), è spinghje dui elementi à manca ( .ml-auto).

Sfortunatamente, IE10 è IE11 ùn sustene micca bè i marghjini auto nantu à l'articuli flex chì u so parente hà un justify-contentvalore micca predeterminatu. Vede sta risposta StackOverflow per più dettagli.

Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
<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>

Cù align-items

Sposta verticalmente un articulu flexible in cima o in fondu di un cuntainer mischjendu align-items, flex-direction: column, è margin-top: autoo margin-bottom: auto.

Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
<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>

Wrap

Cambia cumu l'articuli flex s'imbulighjanu in un containeru flex. Sceglite da nessuna imballaggio (u predefinitu di u navigatore) cù .flex-nowrap, wrapping cù .flex-wrap, o avvolgimentu inversu cù .flex-wrap-reverse.

Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
<div class="d-flex flex-nowrap">
  ...
</div>
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
<div class="d-flex flex-wrap">
  ...
</div>
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
Articulu Flex
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Ci sò ancu variazioni rispunsevuli per 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

Ordine

Cambia l'ordine visuale di l'articuli flex specifichi cù una mansa di orderutilità. Fornemu solu opzioni per fà un articulu prima o l'ultimu, è ancu un reset per utilizà l'ordine DOM. Cume orderpiglia ogni valore integer (per esempiu, 5), aghjunghje CSS persunalizati per qualsiasi valori supplementari necessarii.

Primu articulu flex
Second articulu flex
Terzu articulu flex
<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>

Ci sò ancu variazioni rispunsevuli per 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

Allineate u cuntenutu

Aduprate align-contentutilità nantu à i cuntenituri flexbox per allineà l'articuli flex inseme nantu à l'assi trasversale. Scegli tra start(navigatore predeterminatu), end, center, between, aroundo stretch. Per dimustrà queste utilità, avemu infurzatu flex-wrap: wrapè aumentatu u numeru di elementi flessibili.

A testa alta ! Sta pruprietà ùn hà micca effettu nant'à una sola fila di elementi flex.

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

Ci sò ancu variazioni rispunsevuli per 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