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.
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.
<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
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ă.
<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ă.
<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
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.
<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
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).
<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
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).
<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
Utilizați .flex-fillclasa pe o serie de elemente frați pentru a le forța în lățimi egale, în timp ce ocupă tot spațiul orizontal disponibil. Util în special pentru navigarea cu lățime egală sau justificată.
<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>Există și variații de răspuns pentru flex-fill.
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill
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.
<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, cel de-al doilea element flexibil cu .flex-shrink-1este forțat să înfășoare conținutul său într-o nouă linie, „strângându-se” 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
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.
<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>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.
<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>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
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ă.
<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
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.
<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-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