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 display
utilităț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.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
<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-row
pentru a seta o direcție orizontală (implicit browser) sau .flex-row-reverse
pentru a începe direcția orizontală din partea opusă.
<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-column
pentru a seta o direcție verticală sau .flex-column-reverse
pentru a începe direcția verticală din partea opusă.
<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-content
utilităț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
sau around
.
<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-items
utilităț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
, baseline
sau stretch
(implicit browser).
<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-self
utilitare 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).
<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-fill
clasa 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.
<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-1
elementele folosesc tot spațiul disponibil, permițând în același timp celor două elemente flexibile rămase spațiul necesar.
<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-1
este 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
.
<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-content
valoare care nu este implicită. Consultați acest răspuns StackOverflow pentru mai multe detalii.
<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: auto
sau margin-bottom: auto
.
<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
.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<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 order
utilități. Oferim doar opțiuni pentru a face un articol primul sau ultimul, precum și o resetare pentru a utiliza comanda DOM. După cum order
necesită orice valoare întreagă (de exemplu, 5
), adăugați CSS personalizat pentru orice valoare suplimentară necesară.
<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-content
utilități pe containerele flexbox pentru a alinia articolele flexibile împreună pe axa transversală. Alegeți dintre start
(implicit browser), end
, center
, between
, around
sau 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.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">...</div>
<div class="d-flex align-content-center flex-wrap">...</div>
<div class="d-flex align-content-between flex-wrap">...</div>
<div class="d-flex align-content-around flex-wrap">...</div>
<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