Treci la conținutul principal Treceți la navigarea documentelor
Check
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!
html
<div class="d-flex p-2">I'm a flexbox container!</div>
Sunt un container flexbox inline!
html
<div class="d-inline-flex p-2">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
  • .d-xxl-flex
  • .d-xxl-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
html
<div class="d-flex flex-row mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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
html
<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-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, between, aroundsau evenly.

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

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
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-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
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-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
html
<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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
  • .flex-xxl-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
html
<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">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
html
<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{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 ( .me-auto) și împingerea a două elemente la stânga ( .ms-auto).

Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
Articol flexibil
html
<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="me-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex mb-3">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ms-auto p-2">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
html
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-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. Deoarece ordernecesită orice valoare întreagă de la 0 la 5, adăugați CSS personalizat pentru orice valoare suplimentară necesară.

Primul articol flexibil
Al doilea articol flexibil
Al treilea articol flexibil
html
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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-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

În plus, există și clase responsive și care schimbă caracterul .order-firstunui element prin aplicarea și , respectiv..order-lastorderorder: -1order: 6

  • .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

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

Obiect media

Doriți să replicați componenta obiectului media din Bootstrap 4? Recreează-l în cel mai scurt timp cu câteva utilitare flexibile care permit și mai multă flexibilitate și personalizare decât înainte.

Placeholder Image
Acesta este un conținut dintr-o componentă media. Puteți înlocui acest conținut cu orice conținut și îl puteți ajusta după cum este necesar.
html
<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>

Și spuneți că doriți să centrați vertical conținutul de lângă imagine:

Placeholder Image
Acesta este un conținut dintr-o componentă media. Puteți înlocui acest conținut cu orice conținut și îl puteți ajusta după cum este necesar.
html
<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

Utilities API

Utilitățile Flexbox sunt declarate în API-ul nostru de utilitare în scss/_utilities.scss. Aflați cum să utilizați API-ul utilitare.

    "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
    ),
    "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,
      ),
    ),