in English

Contracta

Gestionați rapid aspectul, alinierea și dimensionarea coloanelor grilei, navigației, componentelor și multe altele, cu o suită completă de utilitare flexbox receptive. Pentru implementări mai complexe, poate fi necesar CSS personalizat.

Activați comportamentele flexibile

Aplicați displayutilități pentru a crea un container flexbox și transformați elementele copiilor directe în articole flexibile. Containerele și articolele Flex pot fi modificate în continuare cu proprietăți flexibile suplimentare.

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

Există și variații de răspuns pentru .d-flexși .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

Direcţie

Setați direcția articolelor flexibile într-un container flexibil cu utilități de direcție. În cele mai multe cazuri, puteți omite clasa orizontală aici, deoarece browserul implicit este row. Cu toate acestea, este posibil să întâmpinați situații în care trebuia să setați în mod explicit această valoare (cum ar fi aspectele receptive).

Utilizați .flex-rowpentru a seta o direcție orizontală (implicit browser) sau .flex-row-reversepentru a începe direcția orizontală din partea opusă.

Element flexibil 1
Elementul flexibil 2
Elementul flexibil 3
Element flexibil 1
Elementul flexibil 2
Elementul flexibil 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>

Utilizați .flex-columnpentru a seta o direcție verticală sau .flex-column-reversepentru a începe direcția verticală din partea opusă.

Element flexibil 1
Elementul flexibil 2
Elementul flexibil 3
Element flexibil 1
Elementul flexibil 2
Elementul flexibil 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>

Există și variații de răspuns pentru 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

Justificați conținutul

Utilizați justify-contentutilități pe containerele flexbox pentru a modifica alinierea elementelor flexibile pe axa principală (axa x pentru a începe, axa y dacă flex-direction: column). Alegeți dintre start(implicit browser), end, center, betweensau around.

Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
<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>

Există și variații de răspuns pentru 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

Aliniați elementele

Utilizați align-itemsutilități pe containerele flexbox pentru a modifica alinierea elementelor flexibile pe axa transversală (axa y pentru a începe, axa x dacă flex-direction: column). Alegeți dintre start, end, center, baselinesau stretch(implicit browser).

Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
<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>

Există și variații de răspuns pentru 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

Aliniați-vă

Utilizați align-selfutilitare pentru articolele flexbox pentru a modifica individual alinierea lor pe axa transversală (axa y pentru a începe, axa x dacă flex-direction: column). Alegeți dintre aceleași opțiuni ca align-items: start, end, center, baseline, sau stretch(implicit browser).

Articol flexibil
Element flexibil aliniat
Articol flexibil
Articol flexibil
Element flexibil aliniat
Articol flexibil
Articol flexibil
Element flexibil aliniat
Articol flexibil
Articol flexibil
Element flexibil aliniat
Articol flexibil
Articol flexibil
Element flexibil aliniat
Articol flexibil
<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>

Există și variații de răspuns pentru 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

Completati

Utilizați .flex-fillclasa pe o serie de elemente frați pentru a le forța în lățimi egale cu conținutul lor (sau lățimi egale dacă conținutul lor nu depășește casetele lor de margine) în timp ce ocupă tot spațiul orizontal disponibil.

Element flexibil cu mult conținut
Articol flexibil
Articol flexibil
<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>

Există și variații de răspuns pentru flex-fill.

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

Creșteți și micșorați-vă

Utilizați .flex-grow-*utilitățile pentru a comuta capacitatea unui element flexibil de a crește pentru a umple spațiul disponibil. În exemplul de mai jos, .flex-grow-1elementele folosesc tot spațiul disponibil, permițând în același timp celor două elemente flexibile rămase spațiul necesar.

Articol flexibil
Articol flexibil
Al treilea articol flexibil
<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>

Utilizați .flex-shrink-*utilități pentru a comuta capacitatea unui element flexibil de a se micșora, dacă este necesar. În exemplul de mai jos, al doilea element flexibil cu .flex-shrink-1este forțat să-și înfășoare conținutul într-o nouă linie, „strângând” pentru a permite mai mult spațiu pentru elementul flexibil anterior cu .w-100.

Articol flexibil
Articol flexibil
<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>

Există și variații de răspuns pentru flex-growși 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

Marje automate

Flexbox poate face lucruri destul de grozave atunci când amestecați aliniamentele flexibile cu marginile automate. Mai jos sunt prezentate trei exemple de control al elementelor flexibile prin intermediul marjelor automate: implicit (fără marjă automată), împingerea a două elemente la dreapta ( .mr-auto) și împingerea a două elemente la stânga ( .ml-auto).

Din păcate, IE10 și IE11 nu acceptă în mod corespunzător marjele automate pentru articolele flexibile al căror părinte are o justify-contentvaloare care nu este implicită. Consultați acest răspuns StackOverflow pentru mai multe detalii.

Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
<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>

Cu elemente de aliniere

Mutați vertical un articol flexibil în partea de sus sau de jos a unui container amestecând align-items, flex-direction: columnși margin-top: autosau margin-bottom: auto.

Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
<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>

Înfășurați

Schimbați modul în care articolele flexibile se înfășoară într-un container flexibil. Alegeți dintre nicio împachetare (setarea implicită a browserului) cu .flex-nowrap, împachetare cu .flex-wrap, sau împachetare inversă cu .flex-wrap-reverse.

Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
<div class="d-flex flex-nowrap">
  ...
</div>
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
<div class="d-flex flex-wrap">
  ...
</div>
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Există și variații de răspuns pentru 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

Ordin

Schimbați ordinea vizuală a anumitor elemente flexibile cu câteva orderutilități. Oferim doar opțiuni pentru a face un articol primul sau ultimul, precum și o resetare pentru a utiliza comanda DOM. După cum ordernecesită orice valoare întreagă (de exemplu, 5), adăugați CSS personalizat pentru orice valoare suplimentară necesară.

Primul articol flexibil
Al doilea articol flexibil
Al treilea articol flexibil
<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>

Există și variații de răspuns pentru 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

Aliniați conținutul

Utilizați align-contentutilități pe containerele flexbox pentru a alinia articolele flexibile împreună pe axa transversală. Alegeți dintre start(implicit browser), end, center, between, aroundsau stretch. Pentru a demonstra aceste utilități, am aplicat flex-wrap: wrapși am crescut numărul de articole flexibile.

Atenție! Această proprietate nu are efect asupra rândurilor individuale de articole flexibile.

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

Există și variații de răspuns pentru align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch