Bootstrap 4 Flex
Bootstrap 4 Flex
Usa le classi flessibili per controllare il layout dei componenti di Bootstrap 4.
Flexbox
La più grande differenza tra Bootstrap 3 e Bootstrap 4 è che Bootstrap 4 ora utilizza flexbox, invece di float, per gestire il layout.
Il modulo Flexible Box Layout, semplifica la progettazione di una struttura di layout reattiva flessibile senza utilizzare float o posizionamento. Se non conosci il flex, puoi leggerlo nel nostro tutorial CSS Flexbox .
Nota: Flexbox non è supportato in IE9 e versioni precedenti.
Se hai bisogno del supporto di IE8-9, usa Bootstrap 3. È la versione più stabile di Bootstrap ed è ancora supportata dal team per correzioni di bug critici e modifiche alla documentazione. Tuttavia, non verranno aggiunte nuove funzionalità.
Per creare un contenitore flexbox e trasformare i figli diretti in elementi flessibili, usa la d-flexclasse:
Esempio
Esempio
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Per creare un contenitore flexbox inline, usa la d-inline-flexclasse:
Esempio
Esempio
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Direzione orizzontale
Utilizzare .flex-rowper visualizzare gli elementi flessibili in orizzontale (affiancati). Questo è predefinito.
Suggerimento: utilizzare .flex-row-reverse
per allineare a destra la direzione orizzontale:
Esempio
Esempio
<div class="d-flex flex-row
bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Direzione verticale
Utilizzare .flex-columnper visualizzare gli elementi flessibili in verticale (uno sopra l'altro) o .flex-column-reverse
per invertire la direzione verticale:
Esempio
Esempio
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
Giustifica il contenuto
Usa le .justify-content-*classi per modificare l'allineamento degli elementi flessibili. Le classi valide sono start(predefinito) end, center, betweeno around:
Esempio
Esempio
<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>
Riempimento/larghezze uguali
Utilizzare .flex-fillsu elementi flessibili per forzarli in larghezze uguali:
Esempio
Esempio
<div class="d-flex">
<div class="p-2 bg-info
flex-fill">Flex
item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
Crescere
Usalo .flex-grow-1su un oggetto flessibile per occupare il resto dello spazio. Nell'esempio seguente, i primi due elementi flessibili occupano lo spazio necessario, mentre l'ultimo elemento occupa il resto dello spazio disponibile:
Esempio
Esempio
<div class="d-flex">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
Suggerimento: utilizzare .flex-shrink-1su un articolo flessibile per farlo restringere, se necessario.
Ordine
Modifica l'ordine visivo di uno o più articoli flessibili specifici con le .orderclassi. Le classi valide sono da 0 a 12, dove il numero più basso ha la priorità più alta (l'ordine-1 è mostrato prima dell'ordine-2, ecc.):
Esempio
Esempio
<div class="d-flex bg-secondary">
<div class="p-2 bg-info
order-3">Flex
item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
Margini automatici
Aggiungi facilmente margini automatici per flettere gli elementi con .mr-auto(spingi gli elementi a destra) o utilizzando .ml-auto(spingi gli elementi a sinistra):
Esempio
Esempio
<div class="d-flex
bg-secondary">
<div class="p-2 mr-auto bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div
class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item
3</div>
</div>
Avvolgere
Controlla il modo in cui gli elementi flessibili vengono inseriti in un contenitore flessibile con .flex-nowrap(impostazione predefinita) .flex-wrapo .flex-wrap-reverse.
Fare clic sui pulsanti sottostanti per vedere la differenza tra le tre classi, modificando il wrapping degli elementi flessibili nella casella di esempio:
Esempio
Esempio
<div class="d-flex flex-wrap">..</div>
<div class="d-flex
flex-wrap-reverse">..</div>
<div class="d-flex
flex-nowrap">..</div>
Allinea il contenuto
Controlla l'allineamento verticale degli elementi flessibili raccolti.align-content-* con le
classi. Le classi valide sono .align-content-start(predefinito) , .align-content-end, .align-content-center, e ..align-content-between.align-content-around.align-content-stretch
Nota: queste classi non hanno effetto su singole righe di elementi flessibili.
Esempio
Esempio
<div class="d-flex flex-wrap
align-content-start">..</div>
<div class="d-flex
flex-wrap align-content-end">..</div>
<div class="d-flex
flex-wrap align-content-center">..</div>
<div class="d-flex
flex-wrap align-content-around">..</div>
<div class="d-flex
flex-wrap align-content-stretch">..</div>
Allinea gli elementi
Controlla l'allineamento verticale di singole file di elementi flessibili con le .align-items-*
classi. Le classi valide sono .align-items-start, .align-items-end, .align-items-center, .align-items-baselinee .align-items-stretch
(predefinito).
Clicca sui pulsanti qui sotto per vedere la differenza tra le cinque classi:
Esempio
Esempio
<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>
Allinea il Sé
Controlla l'allineamento verticale di un elemento flessibile specificato con le .align-self-*
classi. Le classi valide sono .align-self-start, .align-self-end, .align-self-center, .align-self-baselinee .align-self-stretch
(predefinito).
Clicca sui pulsanti qui sotto per vedere la differenza tra le cinque classi:
Esempio
Esempio
<div class="d-flex bg-light" style="height:150px">
<div
class="p-2 border">Flex item 1</div>
<div class="p-2 border
align-self-start">Flex item 2</div>
<div
class="p-2 border">Flex item 3</div>
</div>
Classi flessibili reattive
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.
The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | |
.flex-*-column |
Display flex items vertically on different screens | |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | |
.justify-content-*-between |
Display flex items in "between" on different screens | |
.justify-content-*-around |
Display flex items "around" on different screens | |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*-0-12 |
Change the order from 0 to 12 on small screens | |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | |
.flex-*-wrap |
Wrap items on different screens | |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | |
.align-content-*-end |
Align gathered items at the end on different screens | |
.align-content-*-center |
Align gathered items in the center on different screens | |
.align-content-*-around |
Align gathered items "around" on different screens | |
.align-content-*-stretch |
Stretch gathered items on different screens | |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | |
.align-items-*-end |
Align single rows of items at the end on different screens | |
.align-items-*-center |
Align single rows of items in the center on different screens | |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | |
.align-items-*-stretch |
Stretch single rows of items on different screens | |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | |
.align-self-*-end |
Align a flex item at the end on different screens | |
.align-self-*-center |
Align a flex item in the center on different screens | |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | |
.align-self-*-stretch |
Stretch a flex item on different screens |