Bootstrap4 Layout Flex (Flessibile)

Bootstrap4 utilizza la classe flex per controllare la layout della pagina.

Box flessibile (flexbox)

La maggiore differenza tra Bootstrap 3 e Bootstrap 4 è che Bootstrap 4 utilizza i box flessibili per il layout, piuttosto che i float.

Il box flessibile è un nuovo modello di layout di CSS3, più adatto per la progettazione responsive. Se non conoscete flex, potete leggere il nostro CSS3 Box Flexibile (Flex Box) Tutorial

Attenzione: IE9 e versioni precedenti non supportano i box flessibili, quindi se è necessario essere compatibili con IE8-9, utilizzare Bootstrap 3.

Esempio di utilizzo della classe d-flex per creare un contenitore di box flessibile e impostare tre elementi flessibili:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Flex</h2>
　　<p>Creare un contenitore di box flessibile utilizzando la classe d-flex e impostare tre elementi flessibili:</p>
　　<div class="d-flex p-3 bg-secondary text-white">　　
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

Per creare un contenitore di box flessibile visualizzato sulla stessa riga, utilizzare la classe d-inline-flex:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Flex inline</h2>
　　<p>Per creare un contenitore di box flessibile visualizzato sulla stessa riga, utilizzare la classe d-inline-flex:</p>
　　<div class="d-inline-flex p-3 bg-secondary text-white">　　
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

Direzione orizzontale

.flex-row può impostare la visualizzazione orizzontale degli elementi flessibili, che è il valore predefinito.

Utilizzare la classe .flex-row-reverse per impostare la visualizzazione a destra allineata, ovvero opposta alla direzione di .flex-row.

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Disposizione orizzontale</h2>
　　<p>Utilizza la classe .flex-row per impostare la visualizzazione orizzontale degli elementi flessibili:</p>
　　<div class="d-flex flex-row bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
　　<p>.flex-row-reverse imposta la direzione di allineamento a destra:</p>
　　<div class="d-flex flex-row-reverse bg-secondary">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

Disposizione verticale

.flex-column viene utilizzata per impostare la visualizzazione verticale degli elementi flessibili, .flex-column-reverse viene utilizzata per ribaltare gli elementi:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Disposizione verticale</h2>
　　<p>.flex-column viene utilizzata per impostare la visualizzazione verticale degli elementi flessibili:</p>
　　<div class="d-flex flex-column mb-3">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
　　<p>.flex-column-reverse viene utilizzata per impostare la visualizzazione verticale degli elementi flessibili:</p>
　　<div class="d-flex flex-column-reverse">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

Disposizione del contenuto

.justify-content-* viene utilizzata per modificare il modo di disposizione degli elementi flessibili, * può assumere i seguenti valori:start (predefinito), end, center, between o around:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Modo di disposizione del contenuto</h2>
　　<p>La classe .justify-content-* viene utilizzata per modificare il modo di disposizione degli elementi flessibili, * può assumere i seguenti valori: start (predefinito), end, center, between o around:</p>
　　<div class="d-flex justify-content-start bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
　　<div class="d-flex justify-content-end bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
　　<div class="d-flex justify-content-center bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
　　<div class="d-flex justify-content-between bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
　　<div class="d-flex justify-content-around bg-secondary mb-3">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

Larghezze identiche

.flex-fill classe forza l'impiego di larghezze identiche per tutti gli elementi flessibili:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Uguaglianza delle larghezze</h2>
　　<p>La classe .flex-fill forza l'uguaglianza delle larghezze di tutti gli elementi flessibili:</p>
　　<div class="d-flex mb-3">
　　　　<div class="p-2 flex-fill bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 flex-fill bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 flex-fill bg-primary">Elemento flessibile 3</div>
　　</div>
　　<p>Esempio senza l'uso della classe .flex-fill:</p>
　　<div class="d-flex mb-3 bg-secondary">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

Espansione

.flex-grow-1 viene usata per impostare l'uso dello spazio rimanente dagli elementi figli. Nei seguenti esempi, i primi due elementi figli hanno impostato solo lo spazio necessario, l'ultimo prende lo spazio rimanente.:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Estensione</h2>
　　<p>.flex-grow-1 viene usata per impostare l'uso dello spazio rimanente dagli elementi figli:</p>
　　<div class="d-flex mb-3">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 flex-grow-1 bg-primary">Elemento flessibile 3</div>
　　</div>
　　<p>Esempio senza l'uso di .flex-grow-1:</p>
　　<div class="d-flex mb-3 bg-secondary">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

Suggerimento: Usare .flex-shrink-1 per impostare le regole di contrazione degli elementi figli.

Ordinamento

La classe .order può impostare l'ordinamento degli elementi flessibili, da .order-1 a .order-12, dove il numero più basso ha il peso più alto ( .order-1 precede .order-2):

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Ordinamento</h2>
　　<p>La classe .order può impostare l'ordinamento degli elementi flessibili, da .order-1 a .order-12, dove il numero più basso ha il peso più alto:</p>
　　<div class="d-flex mb-3">
　　　　<div class="p-2 order-3 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 order-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 order-1 bg-primary">Elemento flessibile 3</div>
　　</div>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

margine

la classe .mr-auto può impostare il margine esterno destro degli elementi figli come autoovvero margin-right: auto!important; la classe .ml-auto può impostare il margine esterno sinistro degli elementi figli come autocioè margin-left: auto!important;:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Margine</h2>
　　<p>La classe .mr-auto può impostare il margine destro esterno dell'elemento su auto, mentre la classe .ml-auto può impostare il margine sinistro esterno dell'elemento su auto,</p>
　　<div class="d-flex mb-3 bg-secondary">
　　　　<div class="p-2 mr-auto bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 bg-primary">Elemento flessibile 3</div>
　　</div>
　　<div class="d-flex mb-3 bg-secondary">
　　　　<div class="p-2 bg-info">Elemento flessibile 1</div>
　　　　<div class="p-2 bg-warning">Elemento flessibile 2</div>
　　　　<div class="p-2 ml-auto bg-primary">Elemento flessibile 3</div>
　　</div>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

包裹

È possibile utilizzare le seguenti tre classi per avvolgere elementi figli di un contenitore flessibile: .flex-nowrap (predefinita), .flex-wrap o .flex-wrap-reverse. Impostare il contenitore flessibile su una singola riga o su più righe.

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Avvolgimento</h2>
　　<p>È possibile utilizzare le seguenti tre classi per avvolgere elementi figli di un contenitore flessibile: .flex-nowrap (predefinita), .flex-wrap o .flex-wrap-reverse:</p>
　　<p><code>.flex-wrap:</code></p>
　　<div class="d-flex flex-wrap bg-light">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　　　<div class="p-2 border">Elemento flessibile 4</div>
　　　　<div class="p-2 border">Elemento flessibile 5</div>
　　　　<div class="p-2 border">Elemento flessibile 6</div>
　　　　<div class="p-2 border">Elemento flessibile 7</div>
　　　　<div class="p-2 border">Elemento flessibile 8</div>
　　　　<div class="p-2 border">Elemento flessibile 9</div>
　　　　<div class="p-2 border">Elemento flessibile 10</div>
　　　　<div class="p-2 border">Elemento flessibile 11</div>
　　　　<div class="p-2 border">Elemento flessibile 12</div>
　　　　<div class="p-2 border">Elemento flessibile 13</div>
　　　　<div class="p-2 border">Elemento flessibile 14</div>
　　　　<div class="p-2 border">Elemento flessibile 15</div>
　　　　<div class="p-2 border">Elemento flessibile 16</div>
　　　　<div class="p-2 border">Elemento flessibile 17</div>
　　　　<div class="p-2 border">Elemento flessibile 18</div>
　　　　<div class="p-2 border">Elemento flessibile 19</div>
　　　　<div class="p-2 border">Elemento flessibile 20</div>
　　　　<div class="p-2 border">Elemento flessibile 21</div>
　　　　<div class="p-2 border">Elemento flessibile 22</div>
　　　　<div class="p-2 border">Elemento flessibile 23</div>
　　　　<div class="p-2 border">Elemento flessibile 24</div>
　　　　<div class="p-2 border">Elemento flessibile 25</div>
　　</div>
　　<br>
　　<p><code>.flex-wrap-reverse:</code></p>
　　<div class="d-flex flex-wrap-reverse bg-light">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　　　<div class="p-2 border">Elemento flessibile 4</div>
　　　　<div class="p-2 border">Elemento flessibile 5</div>
　　　　<div class="p-2 border">Elemento flessibile 6</div>
　　　　<div class="p-2 border">Elemento flessibile 7</div>
　　　　<div class="p-2 border">Elemento flessibile 8</div>
　　　　<div class="p-2 border">Elemento flessibile 9</div>
　　　　<div class="p-2 border">Elemento flessibile 10</div>
　　　　<div class="p-2 border">Elemento flessibile 11</div>
　　　　<div class="p-2 border">Elemento flessibile 12</div>
　　　　<div class="p-2 border">Elemento flessibile 13</div>
　　　　<div class="p-2 border">Elemento flessibile 14</div>
　　　　<div class="p-2 border">Elemento flessibile 15</div>
　　　　<div class="p-2 border">Elemento flessibile 16</div>
　　　　<div class="p-2 border">Elemento flessibile 17</div>
　　　　<div class="p-2 border">Elemento flessibile 18</div>
　　　　<div class="p-2 border">Elemento flessibile 19</div>
　　　　<div class="p-2 border">Elemento flessibile 20</div>
　　　　<div class="p-2 border">Elemento flessibile 21</div>
　　　　<div class="p-2 border">Elemento flessibile 22</div>
　　　　<div class="p-2 border">Elemento flessibile 23</div>
　　　　<div class="p-2 border">Elemento flessibile 24</div>
　　　　<div class="p-2 border">Elemento flessibile 25</div>
　　</div>
　　<br>
　　<p><code>.flex-nowrap:</code></p>
　　<div class="d-flex flex-nowrap bg-light">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　　　<div class="p-2 border">Elemento flessibile 4</div>
　　　　<div class="p-2 border">Elemento flessibile 5</div>
　　　　<div class="p-2 border">Elemento flessibile 6</div>
　　　　<div class="p-2 border">Elemento flessibile 7</div>
　　　　<div class="p-2 border">Elemento flessibile 8</div>
　　　　<div class="p-2 border">Elemento flessibile 9</div>
　　　　<div class="p-2 border">Elemento flessibile 10</div>
　　　　<div class="p-2 border">Elemento flessibile 11</div>
　　　　<div class="p-2 border">Elemento flessibile 12</div>
　　　　<div class="p-2 border">Elemento flessibile 13</div>
　　　　<div class="p-2 border">Elemento flessibile 14</div>
　　　　<div class="p-2 border">Elemento flessibile 15</div>
　　　　<div class="p-2 border">Elemento flessibile 16</div>
　　　　<div class="p-2 border">Elemento flessibile 17</div>
　　　　<div class="p-2 border">Elemento flessibile 18</div>
　　　　<div class="p-2 border">Elemento flessibile 19</div>
　　　　<div class="p-2 border">Elemento flessibile 20</div>
　　　　<div class="p-2 border">Elemento flessibile 21</div>
　　　　<div class="p-2 border">Elemento flessibile 22</div>
　　　　<div class="p-2 border">Elemento flessibile 23</div>
　　　　<div class="p-2 border">Elemento flessibile 24</div>
　　　　<div class="p-2 border">Elemento flessibile 25</div>
　　　　<div class="p-2 border">Elemento flessibile 26</div>
　　　　<div class="p-2 border">Elemento flessibile 27</div>
　　　　<div class="p-2 border">Elemento flessibile 28</div>
　　　　<div class="p-2 border">Elemento elastico 29</div>
　　　　<div class="p-2 border">Elemento elastico 30</div>
　　　　<div class="p-2 border">Elemento elastico 31</div>
　　　　<div class="p-2 border">Elemento elastico 32</div>
　　　　<div class="p-2 border">Elemento elastico 33</div>
　　　　<div class="p-2 border">Elemento elastico 34</div>
　　　　<div class="p-2 border">Elemento elastico 35</div>
　　</div>
　　<br>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

Allineamento del contenuto

Puoi usare .align-content-* per controllare come gli elementi figli si dispongono verticalmente, con valori come: .align-content-start (predefinito), .align-content-end, .align-content-center, .align-content-between, .align-content-around e .align-content-stretch.

Queste classi non sono valide per gli elementi elastiche con una sola riga.

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Allineamento del contenuto</h2>
　　<p>Puoi usare .align-content-* per controllare come gli elementi figli si allineano verticalmente.</p>
　　<p><strong>Attenzione:</strong> Questo esempio non funziona bene sui dispositivi di piccole dimensioni. Queste classi non sono valide per gli elementi elastiche con una sola riga.</p>
　　<p>.align-content-start (predefinito):</p>
　　<div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　　　<div class="p-2 border">Elemento flessibile 4</div>
　　　　<div class="p-2 border">Elemento flessibile 5</div>
　　　　<div class="p-2 border">Elemento flessibile 6</div>
　　　　<div class="p-2 border">Elemento flessibile 7</div>
　　　　<div class="p-2 border">Elemento flessibile 8</div>
　　　　<div class="p-2 border">Elemento flessibile 9</div>
　　　　<div class="p-2 border">Elemento flessibile 10</div>
　　　　<div class="p-2 border">Elemento flessibile 11</div>
　　　　<div class="p-2 border">Elemento flessibile 12</div>
　　　　<div class="p-2 border">Elemento flessibile 13</div>
　　　　<div class="p-2 border">Elemento flessibile 14</div>
　　　　<div class="p-2 border">Elemento flessibile 15</div>
　　　　<div class="p-2 border">Elemento flessibile 16</div>
　　　　<div class="p-2 border">Elemento flessibile 17</div>
　　　　<div class="p-2 border">Elemento flessibile 18</div>
　　　　<div class="p-2 border">Elemento flessibile 19</div>
　　　　<div class="p-2 border">Elemento flessibile 20</div>
　　　　<div class="p-2 border">Elemento flessibile 21</div>
　　　　<div class="p-2 border">Elemento flessibile 22</div>
　　　　<div class="p-2 border">Elemento flessibile 23</div>
　　　　<div class="p-2 border">Elemento flessibile 24</div>
　　　　<div class="p-2 border">Elemento flessibile 25</div>
　　</div>
　　<br>
　　<p>.align-content-end:</p>
　　<div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　　　<div class="p-2 border">Elemento flessibile 4</div>
　　　　<div class="p-2 border">Elemento flessibile 5</div>
　　　　<div class="p-2 border">Elemento flessibile 6</div>
　　　　<div class="p-2 border">Elemento flessibile 7</div>
　　　　<div class="p-2 border">Elemento flessibile 8</div>
　　　　<div class="p-2 border">Elemento flessibile 9</div>
　　　　<div class="p-2 border">Elemento flessibile 10</div>
　　　　<div class="p-2 border">Elemento flessibile 11</div>
　　　　<div class="p-2 border">Elemento flessibile 12</div>
　　　　<div class="p-2 border">Elemento flessibile 13</div>
　　　　<div class="p-2 border">Elemento flessibile 14</div>
　　　　<div class="p-2 border">Elemento flessibile 15</div>
　　　　<div class="p-2 border">Elemento flessibile 16</div>
　　　　<div class="p-2 border">Elemento flessibile 17</div>
　　　　<div class="p-2 border">Elemento flessibile 18</div>
　　　　<div class="p-2 border">Elemento flessibile 19</div>
　　　　<div class="p-2 border">Elemento flessibile 20</div>
　　　　<div class="p-2 border">Elemento flessibile 21</div>
　　　　<div class="p-2 border">Elemento flessibile 22</div>
　　　　<div class="p-2 border">Elemento flessibile 23</div>
　　　　<div class="p-2 border">Elemento flessibile 24</div>
　　　　<div class="p-2 border">Elemento flessibile 25</div>
　　</div>
　　<br>
　　<p>.align-content-center:</p>
　　<div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　　　<div class="p-2 border">Elemento flessibile 4</div>
　　　　<div class="p-2 border">Elemento flessibile 5</div>
　　　　<div class="p-2 border">Elemento flessibile 6</div>
　　　　<div class="p-2 border">Elemento flessibile 7</div>
　　　　<div class="p-2 border">Elemento flessibile 8</div>
　　　　<div class="p-2 border">Elemento flessibile 9</div>
　　　　<div class="p-2 border">Elemento flessibile 10</div>
　　　　<div class="p-2 border">Elemento flessibile 11</div>
　　　　<div class="p-2 border">Elemento flessibile 12</div>
　　　　<div class="p-2 border">Elemento flessibile 13</div>
　　　　<div class="p-2 border">Elemento flessibile 14</div>
　　　　<div class="p-2 border">Elemento flessibile 15</div>
　　　　<div class="p-2 border">Elemento flessibile 16</div>
　　　　<div class="p-2 border">Elemento flessibile 17</div>
　　　　<div class="p-2 border">Elemento flessibile 18</div>
　　　　<div class="p-2 border">Elemento flessibile 19</div>
　　　　<div class="p-2 border">Elemento flessibile 20</div>
　　　　<div class="p-2 border">Elemento flessibile 21</div>
　　　　<div class="p-2 border">Elemento flessibile 22</div>
　　　　<div class="p-2 border">Elemento flessibile 23</div>
　　　　<div class="p-2 border">Elemento flessibile 24</div>
　　　　<div class="p-2 border">Elemento flessibile 25</div>
　　</div>
　　<br>
　　<p>.align-content-around:</p>
　　<div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　　　<div class="p-2 border">Elemento flessibile 4</div>
　　　　<div class="p-2 border">Elemento flessibile 5</div>
　　　　<div class="p-2 border">Elemento flessibile 6</div>
　　　　<div class="p-2 border">Elemento flessibile 7</div>
　　　　<div class="p-2 border">Elemento flessibile 8</div>
　　　　<div class="p-2 border">Elemento flessibile 9</div>
　　　　<div class="p-2 border">Elemento flessibile 10</div>
　　　　<div class="p-2 border">Elemento flessibile 11</div>
　　　　<div class="p-2 border">Elemento flessibile 12</div>
　　　　<div class="p-2 border">Elemento flessibile 13</div>
　　　　<div class="p-2 border">Elemento flessibile 14</div>
　　　　<div class="p-2 border">Elemento flessibile 15</div>
　　　　<div class="p-2 border">Elemento flessibile 16</div>
　　　　<div class="p-2 border">Elemento flessibile 17</div>
　　　　<div class="p-2 border">Elemento flessibile 18</div>
　　　　<div class="p-2 border">Elemento flessibile 19</div>
　　　　<div class="p-2 border">Elemento flessibile 20</div>
　　　　<div class="p-2 border">Elemento flessibile 21</div>
　　　　<div class="p-2 border">Elemento flessibile 22</div>
　　　　<div class="p-2 border">Elemento flessibile 23</div>
　　　　<div class="p-2 border">Elemento flessibile 24</div>
　　　　<div class="p-2 border">Elemento flessibile 25</div>
　　</div>
　　<br>
　　<p>.align-content-stretch:</p>
　　<div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　　　<div class="p-2 border">Elemento flessibile 4</div>
　　　　<div class="p-2 border">Elemento flessibile 5</div>
　　　　<div class="p-2 border">Elemento flessibile 6</div>
　　　　<div class="p-2 border">Elemento flessibile 7</div>
　　　　<div class="p-2 border">Elemento flessibile 8</div>
　　　　<div class="p-2 border">Elemento flessibile 9</div>
　　　　<div class="p-2 border">Elemento flessibile 10</div>
　　　　<div class="p-2 border">Elemento flessibile 11</div>
　　　　<div class="p-2 border">Elemento flessibile 12</div>
　　　　<div class="p-2 border">Elemento flessibile 13</div>
　　　　<div class="p-2 border">Elemento flessibile 14</div>
　　　　<div class="p-2 border">Elemento flessibile 15</div>
　　　　<div class="p-2 border">Elemento flessibile 16</div>
　　　　<div class="p-2 border">Elemento flessibile 17</div>
　　　　<div class="p-2 border">Elemento flessibile 18</div>
　　　　<div class="p-2 border">Elemento flessibile 19</div>
　　　　<div class="p-2 border">Elemento flessibile 20</div>
　　　　<div class="p-2 border">Elemento flessibile 21</div>
　　　　<div class="p-2 border">Elemento flessibile 22</div>
　　　　<div class="p-2 border">Elemento flessibile 23</div>
　　　　<div class="p-2 border">Elemento flessibile 24</div>
　　　　<div class="p-2 border">Elemento flessibile 25</div>
　　</div>
　　<br>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

Allineamento dei figli

Per impostare l'allineamento dei figli in una riga singola, è possibile utilizzare le classi .align-items-* per controllare, includendo i seguenti valori:.align-items-start, .align-items-end, .align-items-center, .align-items-baseline e .align-items-stretch (predefinito)。

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Allineamento dei figli</h2>
　　<p>Per impostare l'allineamento dei figli in una riga singola, è possibile utilizzare le classi .align-content-* per controllare.</p>
　　<p>.align-items-start:</p>
　　<div class="d-flex align-items-start bg-light" style="height:150px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　</div>
　　<br>
　　<p>.align-items-end:</p>
　　<div class="d-flex align-items-end bg-light" style="height:150px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　</div>
　　<br>
　　<p>.align-items-center:</p>
　　<div class="d-flex align-items-center bg-light" style="height:150px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　</div>
　　<br>
　　<p>.align-items-baseline:</p>
　　<div class="d-flex align-items-baseline bg-light" style="height:150px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　</div>
　　<br>
　　<p>.align-items-stretch (predefinito):</p>
　　<div class="d-flex align-items-stretch bg-light" style="height:150px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　</div>
　　<br>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

Allineamento dell'elemento figlio specifico

Per impostare l'allineamento di un elemento figlio specifico, è possibile utilizzare la classe .align-self-* per controllare, inclusi i valori: .align-self-start, .align-self-end, .align-self-center, .align-self-baseline e .align-self-stretch (predefinito).

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
　　<h2>Align Self</h2>
　　<p>Per impostare l'allineamento di un elemento figlio specifico, è possibile utilizzare la classe .align-self-* per controllare.</p>
　　<p>.align-self-start:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border align-self-start">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　</div>
　　<br>
　　<p>.align-self-end:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border align-self-end">Elemento flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　</div>
　　<br>
　　<p>.align-self-center:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border align-self-center">Oggetto flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　</div>
　　<br>
　　<p>.align-self-baseline:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border align-self-baseline">Oggetto flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　</div>
　　<br>
　　<p>.align-self-stretch (predefinito):</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">Oggetto flessibile 1</div>
　　　　<div class="p-2 border align-self-stretch">Oggetto flessibile 2</div>
　　　　<div class="p-2 border">Oggetto flessibile 3</div>
　　</div>
　　<br>
</div>
</body>
</html>

Testa per vedere <‹/›>

Ecco l'effetto dopo l'esecuzione:

Classe flex reattiva

Possiamo impostare la classe flex in base a diversi dispositivi, realizzando una layout reattivo della pagina, i valori consentiti per * nel seguente tavolo sono: sm, md, lg o xl, che corrispondono a dispositivi di piccola, media, grande e ultra-grande dimensione.

Classe	Esempio	Realizzazione
Contenitore flessibile
.d-*-flex	Creare un contenitore di scatola flessibile secondo diversi dispositivi di schermo	尝试一下
Direzione
.flex-*-row	Visualizzare gli elementi flessibili nella direzione orizzontale secondo diversi dispositivi di schermo	尝试一下
.flex-*-column	Visualizzare gli elementi flessibili nella direzione verticale secondo diversi dispositivi di schermo	尝试一下
Allineamento del contenuto
.justify-content-*-start	Visualizzare gli elementi flessibili all'inizio della posizione (allineamento a sinistra) secondo diversi dispositivi di schermo	尝试一下
.justify-content-*-center	Visualizzare gli elementi flessibili al centro del contenitore flex secondo diversi dispositivi di schermo	尝试一下
.justify-content-*-around	Secondo diversi dispositivi di schermo utilizzati, visualizzare gli elementi flessibili con "around"	尝试一下
Espansione
.flex-*-grow-0	Non impostare l'espansione per diversi dispositivi di schermo
.flex-*-grow-1	Impostazioni di espansione per diversi dispositivi di schermo
Riduzione
.flex-*-shrink-0	Non impostare la riduzione per diversi dispositivi di schermo
.flex-*-shrink-1	Impostazioni di riduzione per diversi dispositivi di schermo
包裹
.flex-*-nowrap	不同的屏幕设备不设置包裹元素	尝试一下
.flex-*-wrap-reverse	不同的屏幕设备反转包裹元素	尝试一下
.align-content-*-end	根据不同屏幕设备在结束位置堆叠元素	尝试一下
.align-content-*-around	根据不同屏幕设备，使用"around"堆叠元素	尝试一下
元素对齐
.align-items-*-start	根据不同屏幕设备，让元素在头部显示在同一行。	尝试一下
.align-items-*-center	根据不同屏幕设备，让元素在中间位置显示在同一行。	尝试一下
.align-items-*-stretch	根据不同屏幕设备，让元素延展高度并显示在同一行。	尝试一下
.align-self-*-end	根据不同屏幕设备，让单独一个子元素显示在尾部	尝试一下
.align-self-*-baseline	根据不同屏幕设备，让单独一个子元素显示在基线位置	尝试一下

Bootstrap4多媒体对象 Bootstrap4小工具

Bootstrap4 Tutorial di Base

Bootstrap4 Layout Flex (Flessibile)

Box flessibile (flexbox)

Direzione orizzontale

Disposizione verticale

Disposizione del contenuto

Larghezze identiche

Espansione

Ordinamento

margine

包裹

Allineamento del contenuto

Allineamento dei figli

Allineamento dell'elemento figlio specifico

Classe flex reattiva