English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 教程基础

Bootstrap4 mise en page Flex (élastique)

Bootstrap4 le contrôle de la mise en page de la page via la classe flex.

boîte flexible (flexbox)

Bootstrap 3 et Bootstrap 4 La plus grande différence est Bootstrap 4 　utiliser la boîte flexible pour le布局, au lieu d'utiliser les floats pour le layout.

boîte flexible est CSS3 un nouveau modèle de mise en page, plus adapté aux designs réactifs, si vous ne connaissez pas encore flex, vous pouvez lire notre CSS3 boîte flexible (Flex Box) tutoriel

Attention : IE9 et les versions suivantes ne prennent pas en charge les boîtes flexibles, donc si vous avez besoin de compatibilité avec IE8-9，veuillez utiliser Bootstrap 3。

L'exemple suivant utilise d-classe flex crée un conteneur de boîte flexible et définit trois éléments flexibles :

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>Utiliser d-classe flex crée un conteneur de boîte flexible et définit trois éléments flexibles :</p>
　　<div class="d-flex p-3　bg-texte secondaire-white">　　
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:

Créer un conteneur de boîte flexible affiché sur la même ligne peut utiliser d-inline-classe flex :

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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 en ligne</h2>
　　<p>Créer un conteneur de boîte flexible affiché sur la même ligne peut utiliser d-inline-flex classe :</p>
　　<div class="d-inline-flex p-3　bg-texte secondaire-white">　　
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:

direction horizontale

.flex-row peut définir l'affichage horizontal des éléments flexibles, c'est le comportement par défaut.

Utiliser .flex-row-La classe reverse est utilisée pour définir l'affichage à droite, c'est-à-dire avec .flex-row direction inverse.

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>direction horizontale</h2>
　　<p>Utiliser .flex-row classe définit l'affichage horizontal des éléments flexibles：</p>
　　<div class="d-flex flex-row bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
　　<p>.flex-row-reverse définir l'alignement à droite:</p>
　　<div class="d-flex flex-row-inverser bg-secondary">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:

direction verticale

.flex-La classe 'column' est utilisée pour définir l'affichage vertical des éléments flexibles, .flex-column-reverse Utilisé pour flipper les éléments :

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>Direction verticale</h2>
　　<p>.flex-column La classe est utilisée pour définir l'affichage vertical des éléments flexibles :/p>
　　<div class="d-flex flex-column mb-3">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
　　<p>.flex-column-reverse La classe est utilisée pour définir l'affichage inversé des éléments flexibles verticalement :/p>
　　<div class="d-flex flex-column-reverse">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:

Mise en page du contenu

.justify-content-* La classe est utilisée pour modifier la manière dont les éléments flexibles sont alignés,* Les valeurs autorisées sont :start (par défaut), end, center, between ou around:

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>Mise en page du contenu</h2>
　　<p>　.justify-content-*　La classe est utilisée pour modifier la manière dont les éléments flexibles sont alignés,*　Les valeurs autorisées sont : start (par défaut), end, center, between ou around :/p>
　　<div class="d-flex justify-content-début bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
　　<div class="d-flex justify-content-fin bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
　　<div class="d-flex justify-content-centré bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
　　<div class="d-flex justify-content-between bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
　　<div class="d-flex justify-content-autour bg-secondary mb-3">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:


Largeur égale

.flex-fill La classe force la largeur de chaque élément flexible à être la même :

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>Largeur égale</h2>
　　<p>.flex-fill La classe force la largeur de chaque élément flexible à être la même :/p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　flex-fill bg-info">Élément flexible　1</div>
　　　　<div class="p-2　flex-fill bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　flex-fill bg-primary">Élément flexible　3</div>
　　</div>
　　<p>Ne pas utiliser .flex-Exemple de classe fill :/p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:

Extension

.flex-expand-1 　Utilisé pour définir l'utilisation de l'espace restant par l'élément enfant. Dans l'exemple suivant, les deux premiers éléments ne définissent que l'espace nécessaire, et le dernier prend l'espace restant. :

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>Extension</h2>
　　<p>.flex-expand-1　Utilisé pour définir l'utilisation de l'espace restant par l'élément enfant :</p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　flex-expand-1　bg-primary">Élément flexible　3</div>
　　</div>
　　<p>Ne pas utiliser .flex-expand-1　Exemple :/p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:

Avis : Utiliser .flex-shrink-1 Utilisé pour définir les règles de contraction des éléments enfants.

Classement

.order La classe peut configurer l'ordre des éléments flexibles, à partir de .order-1 à .order-12, la valeur numérique plus basse signifie un poids plus élevé ( .order-1 Classé avant .order-2 ) :

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>Classement</h2>
　　<p>.order La classe peut configurer l'ordre des éléments flexibles, à partir de l'ordre-1　à l'ordre-12La valeur numérique plus basse signifie un poids plus élevé :</p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　order-3　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　order-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　order-1　bg-primary">Élément flexible　3</div>
　　</div>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:

Marge

.mr-auto Peut configurer la marge externe droite de l'élément enfant en autoc'est-à-dire margin-right: auto!important;, .ml-auto Peut configurer la marge externe gauche de l'élément enfant en autoc'est-à-dire margin-left: auto!important;:

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>Marge</h2>
　　<p>.mr-auto　peut configurer la marge externe droite de l'élément enfant en auto, .ml-auto　peut configurer la marge externe gauche de l'élément enfant en auto, </p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　mr-auto　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　bg-primary">Élément flexible　3</div>
　　</div>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　　bg-info">Élément flexible　1</div>
　　　　<div class="p-2　bg-warning">Élément flexible　2</div>
　　　　<div class="p-2　ml-auto　bg-primary">Élément flexible　3</div>
　　</div>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:

包裹

Les éléments enfants enveloppés dans un conteneur flexible peuvent utiliser les trois classes suivantes : .flex-non_enroulement (par défaut), .flex-enroulement ou .flex-wrap-inverser. Définir le conteneur flex est en ligne ou en plusieurs lignes.

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>Enveloppe</h2>
　　<p>Vous pouvez envelopper les éléments enfants flexibles dans le conteneur flexible à l'aide des trois classes suivantes :　.flex-non_enroulement (par défaut), .flex-enroulement ou .flex-wrap-inverser:</p>
　　<p><code>.flex-enroulement:</code></p>
　　<div class="d-flex flex-enroulement bg-clair">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　　　<div class="p-2　border">Item flexible　4</div>
　　　　<div class="p-2　border">Item flexible　5</div>
　　　　<div class="p-2　border">Item flexible　6</div>
　　　　<div class="p-2　border">Item flexible　7</div>
　　　　<div class="p-2　border">Item flexible　8</div>
　　　　<div class="p-2　border">Item flexible　9</div>
　　　　<div class="p-2　border">Item flexible　10</div>
　　　　<div class="p-2　border">Item flexible　11</div>
　　　　<div class="p-2　border">Item flexible　12</div>
　　　　<div class="p-2　border">Item flexible　13　</div>
　　　　<div class="p-2　border">Item flexible　14</div>
　　　　<div class="p-2　border">Item flexible　15</div>
　　　　<div class="p-2　border">Item flexible　16</div>
　　　　<div class="p-2　border">Item flexible　17</div>
　　　　<div class="p-2　border">Item flexible　18</div>
　　　　<div class="p-2　border">Item flexible　19</div>
　　　　<div class="p-2　border">Item flexible　20</div>
　　　　<div class="p-2　border">Item flexible　21</div>
　　　　<div class="p-2　border">Item flexible　22</div>
　　　　<div class="p-2　border">Item flexible　23</div>
　　　　<div class="p-2　border">Item flexible　24</div>
　　　　<div class="p-2　border">Item flexible　25</div>
　　</div>
　　<br>
　　<p><code>.flex-wrap-inverser:</code></p>
　　<div class="d-flex flex-wrap-inverser bg-clair">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　　　<div class="p-2　border">Item flexible　4</div>
　　　　<div class="p-2　border">Item flexible　5</div>
　　　　<div class="p-2　border">Item flexible　6</div>
　　　　<div class="p-2　border">Item flexible　7</div>
　　　　<div class="p-2　border">Item flexible　8</div>
　　　　<div class="p-2　border">Item flexible　9</div>
　　　　<div class="p-2　border">Item flexible　10</div>
　　　　<div class="p-2　border">Item flexible　11</div>
　　　　<div class="p-2　border">Item flexible　12</div>
　　　　<div class="p-2　border">Item flexible　13　</div>
　　　　<div class="p-2　border">Item flexible　14</div>
　　　　<div class="p-2　border">Item flexible　15</div>
　　　　<div class="p-2　border">Item flexible　16</div>
　　　　<div class="p-2　border">Item flexible　17</div>
　　　　<div class="p-2　border">Item flexible　18</div>
　　　　<div class="p-2　border">Item flexible　19</div>
　　　　<div class="p-2　border">Item flexible　20</div>
　　　　<div class="p-2　border">Item flexible　21</div>
　　　　<div class="p-2　border">Item flexible　22</div>
　　　　<div class="p-2　border">Item flexible　23</div>
　　　　<div class="p-2　border">Item flexible　24</div>
　　　　<div class="p-2　border">Item flexible　25</div>
　　</div>
　　<br>
　　<p><code>.flex-non_enroulement:</code></p>
　　<div class="d-flex flex-non_enroulement bg-clair">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　　　<div class="p-2　border">Item flexible　4</div>
　　　　<div class="p-2　border">Item flexible　5</div>
　　　　<div class="p-2　border">Item flexible　6</div>
　　　　<div class="p-2　border">Item flexible　7</div>
　　　　<div class="p-2　border">Item flexible　8</div>
　　　　<div class="p-2　border">Item flexible　9</div>
　　　　<div class="p-2　border">Item flexible　10</div>
　　　　<div class="p-2　border">Item flexible　11</div>
　　　　<div class="p-2　border">Item flexible　12</div>
　　　　<div class="p-2　border">Item flexible　13　</div>
　　　　<div class="p-2　border">Item flexible　14</div>
　　　　<div class="p-2　border">Item flexible　15</div>
　　　　<div class="p-2　border">Item flexible　16</div>
　　　　<div class="p-2　border">Item flexible　17</div>
　　　　<div class="p-2　border">Item flexible　18</div>
　　　　<div class="p-2　border">Item flexible　19</div>
　　　　<div class="p-2　border">Item flexible　20</div>
　　　　<div class="p-2　border">Item flexible　21</div>
　　　　<div class="p-2　border">Item flexible　22</div>
　　　　<div class="p-2　border">Item flexible　23</div>
　　　　<div class="p-2　border">Item flexible　24</div>
　　　　<div class="p-2　border">Item flexible　25</div>
　　　　<div class="p-2　border">Item flexible　26</div>
　　　　<div class="p-2　border">Item flexible　27</div>
　　　　<div class="p-2　border">Item flexible　28</div>
　　　　<div class="p-2　border">Item flexible　29</div>
　　　　<div class="p-2　border">Item flexible　30</div>
　　　　<div class="p-2　border">Item flexible　31</div>
　　　　<div class="p-2　border">Item flexible　32</div>
　　　　<div class="p-2　border">Item flexible　33</div>
　　　　<div class="p-2　border">Item flexible　34</div>
　　　　<div class="p-2　border">Item flexible　35</div>
　　</div>
　　<br>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:

Alignement du contenu

Nous pouvons utiliser .align-content-* pour contrôler comment les éléments enfants sont empilés verticalement, les valeurs incluses sont : .align-content-début (par défaut), .align-content-fin, .align-content-centré, .align-content-entre, .align-content-autour et .align-content-étirer

Ces classes sont inefficaces pour les éléments flexibles en une seule ligne.

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>Alignement du contenu</h2>
　　<p>Nous pouvons utiliser　.align-content-*　pour contrôler l'alignement vertical des éléments enfants./p>
　　<p><strong>Attention :/<strong>　Ce exemple n'a pas bonne performance sur les appareils de petite taille. Ces classes sont inefficaces pour les éléments flexibles en une seule ligne.</p>
　　<p>.align-content-début (par défaut):</p>
　　<div class="d-flex flex-enroulement align-content-début bg-light" style="height:300px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　　　<div class="p-2　border">Item flexible　4</div>
　　　　<div class="p-2　border">Item flexible　5</div>
　　　　<div class="p-2　border">Item flexible　6</div>
　　　　<div class="p-2　border">Item flexible　7</div>
　　　　<div class="p-2　border">Item flexible　8</div>
　　　　<div class="p-2　border">Item flexible　9</div>
　　　　<div class="p-2　border">Item flexible　10</div>
　　　　<div class="p-2　border">Item flexible　11</div>
　　　　<div class="p-2　border">Item flexible　12</div>
　　　　<div class="p-2　border">Item flexible　13　</div>
　　　　<div class="p-2　border">Item flexible　14</div>
　　　　<div class="p-2　border">Item flexible　15</div>
　　　　<div class="p-2　border">Item flexible　16</div>
　　　　<div class="p-2　border">Item flexible　17</div>
　　　　<div class="p-2　border">Item flexible　18</div>
　　　　<div class="p-2　border">Item flexible　19</div>
　　　　<div class="p-2　border">Item flexible　20</div>
　　　　<div class="p-2　border">Item flexible　21</div>
　　　　<div class="p-2　border">Item flexible　22</div>
　　　　<div class="p-2　border">Item flexible　23</div>
　　　　<div class="p-2　border">Item flexible　24</div>
　　　　<div class="p-2　border">Item flexible　25</div>
　　</div>
　　<br>
　　<p>.align-content-end:</p>
　　<div class="d-flex flex-enroulement align-content-fin bg-light" style="height:300px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　　　<div class="p-2　border">Item flexible　4</div>
　　　　<div class="p-2　border">Item flexible　5</div>
　　　　<div class="p-2　border">Item flexible　6</div>
　　　　<div class="p-2　border">Item flexible　7</div>
　　　　<div class="p-2　border">Item flexible　8</div>
　　　　<div class="p-2　border">Item flexible　9</div>
　　　　<div class="p-2　border">Item flexible　10</div>
　　　　<div class="p-2　border">Item flexible　11</div>
　　　　<div class="p-2　border">Item flexible　12</div>
　　　　<div class="p-2　border">Item flexible　13　</div>
　　　　<div class="p-2　border">Item flexible　14</div>
　　　　<div class="p-2　border">Item flexible　15</div>
　　　　<div class="p-2　border">Item flexible　16</div>
　　　　<div class="p-2　border">Item flexible　17</div>
　　　　<div class="p-2　border">Item flexible　18</div>
　　　　<div class="p-2　border">Item flexible　19</div>
　　　　<div class="p-2　border">Item flexible　20</div>
　　　　<div class="p-2　border">Item flexible　21</div>
　　　　<div class="p-2　border">Item flexible　22</div>
　　　　<div class="p-2　border">Item flexible　23</div>
　　　　<div class="p-2　border">Item flexible　24</div>
　　　　<div class="p-2　border">Item flexible　25</div>
　　</div>
　　<br>
　　<p>.align-content-center:</p>
　　<div class="d-flex flex-enroulement align-content-centré bg-light" style="height:300px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　　　<div class="p-2　border">Item flexible　4</div>
　　　　<div class="p-2　border">Item flexible　5</div>
　　　　<div class="p-2　border">Item flexible　6</div>
　　　　<div class="p-2　border">Item flexible　7</div>
　　　　<div class="p-2　border">Item flexible　8</div>
　　　　<div class="p-2　border">Item flexible　9</div>
　　　　<div class="p-2　border">Item flexible　10</div>
　　　　<div class="p-2　border">Item flexible　11</div>
　　　　<div class="p-2　border">Item flexible　12</div>
　　　　<div class="p-2　border">Item flexible　13　</div>
　　　　<div class="p-2　border">Item flexible　14</div>
　　　　<div class="p-2　border">Item flexible　15</div>
　　　　<div class="p-2　border">Item flexible　16</div>
　　　　<div class="p-2　border">Item flexible　17</div>
　　　　<div class="p-2　border">Item flexible　18</div>
　　　　<div class="p-2　border">Item flexible　19</div>
　　　　<div class="p-2　border">Item flexible　20</div>
　　　　<div class="p-2　border">Item flexible　21</div>
　　　　<div class="p-2　border">Item flexible　22</div>
　　　　<div class="p-2　border">Item flexible　23</div>
　　　　<div class="p-2　border">Item flexible　24</div>
　　　　<div class="p-2　border">Item flexible　25</div>
　　</div>
　　<br>
　　<p>.align-content-autour:</p>
　　<div class="d-flex flex-enroulement align-content-autour bg-light" style="height:300px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　　　<div class="p-2　border">Item flexible　4</div>
　　　　<div class="p-2　border">Item flexible　5</div>
　　　　<div class="p-2　border">Item flexible　6</div>
　　　　<div class="p-2　border">Item flexible　7</div>
　　　　<div class="p-2　border">Item flexible　8</div>
　　　　<div class="p-2　border">Item flexible　9</div>
　　　　<div class="p-2　border">Item flexible　10</div>
　　　　<div class="p-2　border">Item flexible　11</div>
　　　　<div class="p-2　border">Item flexible　12</div>
　　　　<div class="p-2　border">Item flexible　13　</div>
　　　　<div class="p-2　border">Item flexible　14</div>
　　　　<div class="p-2　border">Item flexible　15</div>
　　　　<div class="p-2　border">Item flexible　16</div>
　　　　<div class="p-2　border">Item flexible　17</div>
　　　　<div class="p-2　border">Item flexible　18</div>
　　　　<div class="p-2　border">Item flexible　19</div>
　　　　<div class="p-2　border">Item flexible　20</div>
　　　　<div class="p-2　border">Item flexible　21</div>
　　　　<div class="p-2　border">Item flexible　22</div>
　　　　<div class="p-2　border">Item flexible　23</div>
　　　　<div class="p-2　border">Item flexible　24</div>
　　　　<div class="p-2　border">Item flexible　25</div>
　　</div>
　　<br>
　　<p>.align-content-étirer:</p>
　　<div class="d-flex flex-enroulement align-content-étirer bg-light" style="height:300px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　　　<div class="p-2　border">Item flexible　4</div>
　　　　<div class="p-2　border">Item flexible　5</div>
　　　　<div class="p-2　border">Item flexible　6</div>
　　　　<div class="p-2　border">Item flexible　7</div>
　　　　<div class="p-2　border">Item flexible　8</div>
　　　　<div class="p-2　border">Item flexible　9</div>
　　　　<div class="p-2　border">Item flexible　10</div>
　　　　<div class="p-2　border">Item flexible　11</div>
　　　　<div class="p-2　border">Item flexible　12</div>
　　　　<div class="p-2　border">Item flexible　13　</div>
　　　　<div class="p-2　border">Item flexible　14</div>
　　　　<div class="p-2　border">Item flexible　15</div>
　　　　<div class="p-2　border">Item flexible　16</div>
　　　　<div class="p-2　border">Item flexible　17</div>
　　　　<div class="p-2　border">Item flexible　18</div>
　　　　<div class="p-2　border">Item flexible　19</div>
　　　　<div class="p-2　border">Item flexible　20</div>
　　　　<div class="p-2　border">Item flexible　21</div>
　　　　<div class="p-2　border">Item flexible　22</div>
　　　　<div class="p-2　border">Item flexible　23</div>
　　　　<div class="p-2　border">Item flexible　24</div>
　　　　<div class="p-2　border">Item flexible　25</div>
　　</div>
　　<br>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:


Alignement des éléments enfants

Si vous souhaitez aligner un élément enfant en ligne spécifique, vous pouvez utiliser .align-items-* les classes pour contrôler, les valeurs incluses sont :.align-items-début, .align-items-fin, .align-items-centré, .align-items-ligne de base, et .align-items-étirer (par défaut)。

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>Alignement des éléments enfants</h2>
　　<p>Si vous souhaitez aligner un élément enfant en ligne spécifique, vous pouvez utiliser .align-content-*　La classe peut être utilisée pour contrôler.</p>
　　<p>.align-items-start:</p>
　　<div class="d-alignement flex-items-début bg-light" style="height:150px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　</div>
　　<br>
　　<p>.align-items-end:</p>
　　<div class="d-alignement flex-items-fin bg-light" style="height:150px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　</div>
　　<br>
　　<p>.align-items-center:</p>
　　<div class="d-alignement flex-items-centré bg-light" style="height:150px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　</div>
　　<br>
　　<p>.align-items-baseline:</p>
　　<div class="d-alignement flex-items-ligne de base bg-light" style="height:150px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　</div>
　　<br>
　　<p>.align-items-stretch (par défaut) :</p>
　　<div class="d-alignement flex-items-étirer bg-light" style="height:150px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　</div>
　　<br>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:

Alignement des éléments enfants spécifiques

Si vous souhaitez aligner un élément enfant spécifique, vous pouvez utiliser .align-self-* les classes pour contrôler, les valeurs incluses sont : .align-self-début, .align-self-fin, .align-self-centré, .align-self-ligne de base, et .align-self-étirer (par défaut).

<!DOCTYPE　html>
<html>
<head>
　　<title>Exemple Bootstrap　</titre>
　　<meta　charset="utf-8-8">
　　<meta　name="viewport"　content="largeur=device-largeur,　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>Si vous souhaitez aligner un élément enfant spécifique, vous pouvez utiliser .align-self-*　La classe peut être utilisée pour contrôler.</p>
　　<p>.align-self-start:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border align-self-start">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　</div>
　　<br>
　　<p>.align-self-end:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border align-self-end">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　</div>
　　<br>
　　<p>.align-self-center:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border align-self-center">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　</div>
　　<br>
　　<p>.align-self-baseline:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border align-self-baseline">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　</div>
　　<br>
　　<p>.align-self-stretch (par défaut) :</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Item flexible　1</div>
　　　　<div class="p-2　border align-self-stretch">Item flexible　2</div>
　　　　<div class="p-2　border">Item flexible　3</div>
　　</div>
　　<br>
</div>
</body>
</html>
Voyons ce qui se passe ‹/›

L'effet après l'exécution est le suivant:

Classe flex réactive

Nous pouvons définir les classes flex en fonction des différents appareils pour réaliser un布局 réactif de la page, comme dans le tableau suivant * Les valeurs possibles sont : sm, md, lg ou xl, correspondant aux appareils de petite taille, de taille moyenne, de grande taille et d'extra grande taille.

ClasseExempleRéaliser
Conteneur flexible
.d-*-flexCréez un conteneur de boîte flexible en fonction des différents appareils d'écran尝试一下 　
Direction
.flex-*-rowAffichez les éléments flexibles en direction horizontale en fonction des différents appareils d'écran尝试一下 　
.flex-*-columnAffichez les éléments flexibles en direction verticale en fonction des différents appareils d'écran尝试一下 　
Alignement du contenu
.justify-content-*-startAffichez les éléments flexibles à la position de début en fonction des différents appareils d'écran (aligné à gauche)尝试一下 　
.justify-content-*-centerAffichez les éléments flexibles au centre dans le conteneur flex en fonction des différents appareils d'écran尝试一下 　
.justify-content-*-aroundSelon les différents appareils d'écran, utilisez "around" pour afficher les éléments flexibles尝试一下 　
Extension
.flex-*-expand-0Les différents appareils d'écran ne définissent pas l'extension　
.flex-*-expand-1不同的屏幕设备设置扩展　
收缩
.flex-*-shrink-0不同的屏幕设备不设置收缩　
.flex-*-shrink-1不同的屏幕设备设置收缩　
包裹
.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 小工具