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

Bootstrap4 Tutorial Básico

Bootstrap4 布局 Flex (Elastic)

Bootstrap4 controla o layout da página através da classe flex.

caixa flexível (flexbox)

Bootstrap 3 com Bootstrap 4 A maior diferença é Bootstrap 4 　usar a caixa flexível para layout, em vez de usar float para layout.

caixa flexível é CSS3 um novo modelo de layout, mais adequado para designs responsivos, se você ainda não conhece o flex, pode ler nosso CSS3 caixa flexível (Flex Box) tutorial

Atenção: IE9 e as versões subsequentes não suportam caixas flexíveis, então se você precisar de compatibilidade com IE8-9，por favor, use Bootstrap 3。

O exemplo a seguir usa o d-A classe 'flex' cria um contêiner de caixa flexível e define três elementos filhos flexíveis:

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>Usar o d-A classe 'flex' cria um contêiner de caixa flexível e define três elementos filhos flexíveis:</p>
　　<div class="d-flex p-3　bg-texto secundário-white">　　
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Para criar um contêiner de caixa flexível exibido na mesma linha, você pode usar o d-inline-classe flex:

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>Flexo Linha</h2>
　　<p>Para criar um contêiner de caixa flexível exibido na mesma linha, você pode usar o d-inline-A classe 'flex':/p>
　　<div class="d-inline-flex p-3　bg-texto secundário-white">　　
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

direção horizontal

.flex-row pode definir a exibição horizontal dos elementos filhos flexíveis, o que é o padrão.

Usar .flex-row-A classe 'reverse' é usada para definir a exibição alinhada à direita, ou seja, oposta à .flex-row com direção inversa.

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>direção horizontal</h2>
　　<p>Usar .flex-A classe 'row' define a exibição horizontal dos elementos filhos flexíveis:</p>
　　<div class="d-flex flex-row bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
　　<p>.flex-row-reverse define alinhamento à direita:</p>
　　<div class="d-flex flex-row-inverter bg-secondary">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

direção vertical

.flex-A classe 'column' é usada para definir a exibição vertical dos elementos filhos flexíveis, .flex-column-reverse usado para inverter os elementos filhos:

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>Direção vertical</h2>
　　<p>.flex-Classe column usado para definir a exibição vertical dos elementos filhos flexíveis:</p>
　　<div class="d-flex flex-column　mb-3">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
　　<p>.flex-column-Classe reverse usado para definir a exibição invertida dos elementos filhos flexíveis:</p>
　　<div class="d-flex flex-column-reverse">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Alinhamento do conteúdo

-conteúdo-* classe usado para modificar o alinhamento dos elementos filhos flexíveis,* Os valores permitidos são:start (padrão), end, center, between ou around:

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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 de alinhamento do conteúdo</h2>
　　<p>　.justify-conteúdo-*　classe usado para modificar o alinhamento dos elementos filhos flexíveis,*　Os valores permitidos são: start (padrão), end, center, between ou around:</p>
　　<div class="d-flex　justify-conteúdo-início bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
　　<div class="d-flex　justify-conteúdo-fim bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
　　<div class="d-flex　justify-conteúdo-centro bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
　　<div class="d-flex　justify-conteúdo-between　bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
　　<div class="d-flex　justify-conteúdo-ao redor bg-secondary　mb-3">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:


Largura igual

.flex-Classe fill força a definir a largura de todos os elementos filhos flexíveis como igual:

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>Largura igual</h2>
　　<p>.flex-Classe fill força a definir a largura de todos os elementos filhos flexíveis como igual:</p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　flex-fill　bg-info">Item flexível　1</div>
　　　　<div class="p-2　flex-fill　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　flex-fill　bg-primary">Item flexível　3</div>
　　</div>
　　<p>Não usar .flex-Exemplo de classe fill:</p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Expansion

.flex-expandir-1 　usado para definir o espaço restante do elemento filho. No exemplo a seguir, os dois primeiros elementos filhos definem apenas o espaço necessário, e o último obtém o espaço restante. :

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>Expansão</h2>
　　<p>.flex-expandir-1　usado para definir o espaço restante do elemento filho: </p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　flex-expandir-1　bg-primary">Item flexível　3</div>
　　</div>
　　<p>Não usar .flex-expandir-1　Exemplo:</p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Aviso: Usar .flex-contrair-1 usado para definir as regras de contração do elemento filho.

Ordenação

.order　classe pode definir a ordenação do elemento filho flexível, a partir da .order-1 até .order-12O número mais baixo tem maior peso ( .order-1 colocado antes da .order-2 ) :

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>Ordenação</h2>
　　<p>.order　classe pode definir a ordenação do elemento filho flexível, a partir da .order-1　até à .order-12O número mais baixo tem maior peso:</p>
　　<div class="d-flex　mb-3">
　　　　<div class="p-2　order-3　bg-info">Item flexível　1</div>
　　　　<div class="p-2　order-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　order-1　bg-primary">Item flexível　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Margem

.mr-auto　classe pode definir a margem externa direita do elemento filho como autoou seja, margin-right: auto!important;，.ml-auto　classe pode definir a margem externa esquerda do elemento filho como autoou seja, margin-left: auto!important;:

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>Margem</h2>
　　<p>.mr-auto　classe pode definir a margem externa direita do elemento filho como auto, .ml-auto　classe pode definir a margem externa esquerda do elemento filho como auto, </p>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　mr-auto　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　bg-primary">Item flexível　3</div>
　　</div>
　　<div class="d-flex　mb-3　bg-secondary">
　　　　<div class="p-2　　bg-info">Item flexível　1</div>
　　　　<div class="p-2　bg-warning">Item flexível　2</div>
　　　　<div class="p-2　ml-auto　bg-primary">Item flexível　3</div>
　　</div>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

envolvimento

Os elementos filhos envolvidos em um contêiner flexível podem usar as seguintes três classes: .flex-sem quebra (padrão), .flex-quebra ou .flex-envolver-inverter. Definir o contêiner flexível como linha única ou múltipla.

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>envolver</h2>
　　<p>Para envolver elementos filhos no contêiner flexível, podem ser usadas as seguintes três classes:　.flex-sem quebra (padrão), .flex-quebra ou .flex-envolver-inverter:</p>
　　<p><code>.flex-quebra:</code></p>
　　<div class="d-flex flex-quebra bg-ligeiro">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　　　<div class="p-2　border">Flex item　4</div>
　　　　<div class="p-2　border">Flex item　5</div>
　　　　<div class="p-2　border">Flex item　6</div>
　　　　<div class="p-2　border">Flex item　7</div>
　　　　<div class="p-2　border">Flex item　8</div>
　　　　<div class="p-2　border">Flex item　9</div>
　　　　<div class="p-2　border">Flex item　10</div>
　　　　<div class="p-2　border">Flex item　11</div>
　　　　<div class="p-2　border">Flex item　12</div>
　　　　<div class="p-2　border">Flex item　13　</div>
　　　　<div class="p-2　border">Flex item　14</div>
　　　　<div class="p-2　border">Flex item　15</div>
　　　　<div class="p-2　border">Flex item　16</div>
　　　　<div class="p-2　border">Flex item　17</div>
　　　　<div class="p-2　border">Flex item　18</div>
　　　　<div class="p-2　border">Flex item　19</div>
　　　　<div class="p-2　border">Flex item　20</div>
　　　　<div class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p><code>.flex-envolver-inverter:</code></p>
　　<div class="d-flex flex-envolver-inverter bg-ligeiro">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　　　<div class="p-2　border">Flex item　4</div>
　　　　<div class="p-2　border">Flex item　5</div>
　　　　<div class="p-2　border">Flex item　6</div>
　　　　<div class="p-2　border">Flex item　7</div>
　　　　<div class="p-2　border">Flex item　8</div>
　　　　<div class="p-2　border">Flex item　9</div>
　　　　<div class="p-2　border">Flex item　10</div>
　　　　<div class="p-2　border">Flex item　11</div>
　　　　<div class="p-2　border">Flex item　12</div>
　　　　<div class="p-2　border">Flex item　13　</div>
　　　　<div class="p-2　border">Flex item　14</div>
　　　　<div class="p-2　border">Flex item　15</div>
　　　　<div class="p-2　border">Flex item　16</div>
　　　　<div class="p-2　border">Flex item　17</div>
　　　　<div class="p-2　border">Flex item　18</div>
　　　　<div class="p-2　border">Flex item　19</div>
　　　　<div class="p-2　border">Flex item　20</div>
　　　　<div class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p><code>.flex-sem quebra:</code></p>
　　<div class="d-flex flex-sem quebra bg-ligeiro">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　　　<div class="p-2　border">Flex item　4</div>
　　　　<div class="p-2　border">Flex item　5</div>
　　　　<div class="p-2　border">Flex item　6</div>
　　　　<div class="p-2　border">Flex item　7</div>
　　　　<div class="p-2　border">Flex item　8</div>
　　　　<div class="p-2　border">Flex item　9</div>
　　　　<div class="p-2　border">Flex item　10</div>
　　　　<div class="p-2　border">Flex item　11</div>
　　　　<div class="p-2　border">Flex item　12</div>
　　　　<div class="p-2　border">Flex item　13　</div>
　　　　<div class="p-2　border">Flex item　14</div>
　　　　<div class="p-2　border">Flex item　15</div>
　　　　<div class="p-2　border">Flex item　16</div>
　　　　<div class="p-2　border">Flex item　17</div>
　　　　<div class="p-2　border">Flex item　18</div>
　　　　<div class="p-2　border">Flex item　19</div>
　　　　<div class="p-2　border">Flex item　20</div>
　　　　<div class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　　　<div class="p-2　border">Flex item　26</div>
　　　　<div class="p-2　border">Flex item　27</div>
　　　　<div class="p-2　border">Flex item　28</div>
　　　　<div class="p-2　border">Flex item　29</div>
　　　　<div class="p-2　border">Flex item　30</div>
　　　　<div class="p-2　border">Flex item　31</div>
　　　　<div class="p-2　border">Flex item　32</div>
　　　　<div class="p-2　border">Flex item　33</div>
　　　　<div class="p-2　border">Flex item　34</div>
　　　　<div class="p-2　border">Flex item　35</div>
　　</div>
　　<br>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Content alignment

Pode-se usar .align-conteúdo-* para controlar como os elementos filhos são empilhados na direção vertical, incluindo os valores: .align-conteúdo-início (padrão), .align-conteúdo-fim, .align-conteúdo-centro, .align-conteúdo-entre, .align-conteúdo-ao redor e .align-conteúdo-estender

Essas classes são ineficazes em elementos flexíveis em apenas uma linha.

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>alinhamento de conteúdo</h2>
　　<p>Pode-se usar　.align-conteúdo-*　para controlar o alinhamento dos elementos filhos na direção vertical.</p>
　　<p><strong>Atenção:</<strong>Este exemplo não funciona bem em dispositivos pequenos. Essas classes são ineficazes em elementos flexíveis em apenas uma linha.</p>
　　<p>.align-conteúdo-início (padrão):</p>
　　<div class="d-flex flex-wrap alinhamento-conteúdo-início bg-light" style="height:300px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　　　<div class="p-2　border">Flex item　4</div>
　　　　<div class="p-2　border">Flex item　5</div>
　　　　<div class="p-2　border">Flex item　6</div>
　　　　<div class="p-2　border">Flex item　7</div>
　　　　<div class="p-2　border">Flex item　8</div>
　　　　<div class="p-2　border">Flex item　9</div>
　　　　<div class="p-2　border">Flex item　10</div>
　　　　<div class="p-2　border">Flex item　11</div>
　　　　<div class="p-2　border">Flex item　12</div>
　　　　<div class="p-2　border">Flex item　13　</div>
　　　　<div class="p-2　border">Flex item　14</div>
　　　　<div class="p-2　border">Flex item　15</div>
　　　　<div class="p-2　border">Flex item　16</div>
　　　　<div class="p-2　border">Flex item　17</div>
　　　　<div class="p-2　border">Flex item　18</div>
　　　　<div class="p-2　border">Flex item　19</div>
　　　　<div class="p-2　border">Flex item　20</div>
　　　　<div class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p>.align-conteúdo-end:</p>
　　<div class="d-flex flex-wrap alinhamento-conteúdo-fim bg-light" style="height:300px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　　　<div class="p-2　border">Flex item　4</div>
　　　　<div class="p-2　border">Flex item　5</div>
　　　　<div class="p-2　border">Flex item　6</div>
　　　　<div class="p-2　border">Flex item　7</div>
　　　　<div class="p-2　border">Flex item　8</div>
　　　　<div class="p-2　border">Flex item　9</div>
　　　　<div class="p-2　border">Flex item　10</div>
　　　　<div class="p-2　border">Flex item　11</div>
　　　　<div class="p-2　border">Flex item　12</div>
　　　　<div class="p-2　border">Flex item　13　</div>
　　　　<div class="p-2　border">Flex item　14</div>
　　　　<div class="p-2　border">Flex item　15</div>
　　　　<div class="p-2　border">Flex item　16</div>
　　　　<div class="p-2　border">Flex item　17</div>
　　　　<div class="p-2　border">Flex item　18</div>
　　　　<div class="p-2　border">Flex item　19</div>
　　　　<div class="p-2　border">Flex item　20</div>
　　　　<div class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p>.align-conteúdo-center:</p>
　　<div class="d-flex flex-wrap alinhamento-conteúdo-centro bg-light" style="height:300px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　　　<div class="p-2　border">Flex item　4</div>
　　　　<div class="p-2　border">Flex item　5</div>
　　　　<div class="p-2　border">Flex item　6</div>
　　　　<div class="p-2　border">Flex item　7</div>
　　　　<div class="p-2　border">Flex item　8</div>
　　　　<div class="p-2　border">Flex item　9</div>
　　　　<div class="p-2　border">Flex item　10</div>
　　　　<div class="p-2　border">Flex item　11</div>
　　　　<div class="p-2　border">Flex item　12</div>
　　　　<div class="p-2　border">Flex item　13　</div>
　　　　<div class="p-2　border">Flex item　14</div>
　　　　<div class="p-2　border">Flex item　15</div>
　　　　<div class="p-2　border">Flex item　16</div>
　　　　<div class="p-2　border">Flex item　17</div>
　　　　<div class="p-2　border">Flex item　18</div>
　　　　<div class="p-2　border">Flex item　19</div>
　　　　<div class="p-2　border">Flex item　20</div>
　　　　<div class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p>.align-conteúdo-ao redor:</p>
　　<div class="d-flex flex-wrap alinhamento-conteúdo-ao redor bg-light" style="height:300px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　　　<div class="p-2　border">Flex item　4</div>
　　　　<div class="p-2　border">Flex item　5</div>
　　　　<div class="p-2　border">Flex item　6</div>
　　　　<div class="p-2　border">Flex item　7</div>
　　　　<div class="p-2　border">Flex item　8</div>
　　　　<div class="p-2　border">Flex item　9</div>
　　　　<div class="p-2　border">Flex item　10</div>
　　　　<div class="p-2　border">Flex item　11</div>
　　　　<div class="p-2　border">Flex item　12</div>
　　　　<div class="p-2　border">Flex item　13　</div>
　　　　<div class="p-2　border">Flex item　14</div>
　　　　<div class="p-2　border">Flex item　15</div>
　　　　<div class="p-2　border">Flex item　16</div>
　　　　<div class="p-2　border">Flex item　17</div>
　　　　<div class="p-2　border">Flex item　18</div>
　　　　<div class="p-2　border">Flex item　19</div>
　　　　<div class="p-2　border">Flex item　20</div>
　　　　<div class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
　　<p>.align-conteúdo-estender:</p>
　　<div class="d-flex flex-wrap alinhamento-conteúdo-estender bg-light" style="height:300px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　　　<div class="p-2　border">Flex item　4</div>
　　　　<div class="p-2　border">Flex item　5</div>
　　　　<div class="p-2　border">Flex item　6</div>
　　　　<div class="p-2　border">Flex item　7</div>
　　　　<div class="p-2　border">Flex item　8</div>
　　　　<div class="p-2　border">Flex item　9</div>
　　　　<div class="p-2　border">Flex item　10</div>
　　　　<div class="p-2　border">Flex item　11</div>
　　　　<div class="p-2　border">Flex item　12</div>
　　　　<div class="p-2　border">Flex item　13　</div>
　　　　<div class="p-2　border">Flex item　14</div>
　　　　<div class="p-2　border">Flex item　15</div>
　　　　<div class="p-2　border">Flex item　16</div>
　　　　<div class="p-2　border">Flex item　17</div>
　　　　<div class="p-2　border">Flex item　18</div>
　　　　<div class="p-2　border">Flex item　19</div>
　　　　<div class="p-2　border">Flex item　20</div>
　　　　<div class="p-2　border">Flex item　21</div>
　　　　<div class="p-2　border">Flex item　22</div>
　　　　<div class="p-2　border">Flex item　23</div>
　　　　<div class="p-2　border">Flex item　24</div>
　　　　<div class="p-2　border">Flex item　25</div>
　　</div>
　　<br>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:


alinhamento de elementos filhos

Se desejar ajustar o alinhamento de um único elemento filho, você pode usar .align-itens-* classe para controlar, incluindo os valores:.alinhamento-itens-início, .align-itens-fim, .align-itens-centro, .align-itens-linha de base, e .align-itens-estender (padrão)。

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>alinhamento de elementos filhos</h2>
　　<p>Se desejar ajustar o alinhamento de um único elemento filho, você pode usar .align-conteúdo-*　class to control.</p>
　　<p>.align-itens-start:</p>
　　<div class="d-flex alinhamento-itens-início bg-light" style="height:150px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　</div>
　　<br>
　　<p>.align-itens-end:</p>
　　<div class="d-flex alinhamento-itens-fim bg-light" style="height:150px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　</div>
　　<br>
　　<p>.align-itens-center:</p>
　　<div class="d-flex alinhamento-itens-centro bg-light" style="height:150px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　</div>
　　<br>
　　<p>.align-itens-baseline:</p>
　　<div class="d-flex alinhamento-itens-linha de base bg-light" style="height:150px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　</div>
　　<br>
　　<p>.align-itens-stretch (default):</p>
　　<div class="d-flex alinhamento-itens-estender bg-light" style="height:150px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　</div>
　　<br>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

alinhamento de elementos filhos específicos

Se desejar ajustar a alinhamento de um elemento filho específico, você pode usar .align-próprio-* classe para controlar, incluindo os valores: .align-próprio-início, .align-próprio-fim, .align-próprio-centro, .align-próprio-linha de base, e .align-próprio-estender (padrão).

<!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap　</título>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-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>If you want to set the alignment of a specified child element, you can use .align-próprio-*　class to control.</p>
　　<p>.align-próprio-start:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border align-próprio-start">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　</div>
　　<br>
　　<p>.align-próprio-end:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border align-próprio-end">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　</div>
　　<br>
　　<p>.align-próprio-center:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border align-próprio-center">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　</div>
　　<br>
　　<p>.align-próprio-baseline:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border align-próprio-baseline">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　</div>
　　<br>
　　<p>.align-próprio-stretch (default):</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2　border">Flex item　1</div>
　　　　<div class="p-2　border align-próprio-stretch">Flex item　2</div>
　　　　<div class="p-2　border">Flex item　3</div>
　　</div>
　　<br>
</div>
</body>
</html>
Test and see ‹/›

The effect after running is as follows:

Responsive flex class

We can set the flex class according to different devices to achieve responsive page layout. The following table lists the * The available values are: sm, md, lg or xl, corresponding to small devices, medium devices, large devices, and extra-large devices.

ClassExampleImplementation
Flexible container
.d-*-flexCreate a flexible box container according to different screen devicesExperimente 　
Direction
.flex-*-rowDisplay flexible child elements horizontally according to different screen devicesExperimente 　
.flex-*-columnDisplay flexible child elements vertically according to different screen devicesExperimente 　
Content alignment
-conteúdo-*-inícioDisplay flexible child elements at the starting position (left-aligned) according to different screen devicesExperimente 　
-conteúdo-*-centroCenter display child elements in flex container according to different screen devicesExperimente 　
-conteúdo-*-ao redorUse "around" to display flexible child elements according to different screen devicesExperimente 　
Expansion
.flex-*-expandir-0Different screen devices do not set expansion　
.flex-*-expandir-1Definir o expandir em diferentes dispositivos de tela　
contrair
.flex-*-contrair-0Não definir o contrair em diferentes dispositivos de tela　
.flex-*-contrair-1Definir o contrair em diferentes dispositivos de tela　
envolvimento
.flex-*-sem-quebraNão definir o envolvimento em diferentes dispositivos de telaExperimente 　
.flex-*-envolver-inverterInverter os elementos envoltórios em diferentes dispositivos de telaExperimente 　
.alinhamento-conteúdo-*-fimDe acordo com diferentes dispositivos de tela, empilhe elementos na posição final.Experimente 　
.alinhamento-conteúdo-*-ao redorDe acordo com diferentes dispositivos de tela, empilhe elementos usando "ao redor".Experimente 　
Alinhamento de Elementos
.alinhamento-itens-*-inícioDe acordo com diferentes dispositivos de tela, exiba os elementos na extremidade superior na mesma linha.Experimente 　
.alinhamento-itens-*-centroDe acordo com diferentes dispositivos de tela, exiba os elementos no centro na mesma linha.Experimente 　
.alinhamento-itens-*-estenderDe acordo com diferentes dispositivos de tela, estique a altura do elemento e exiba na mesma linha.Experimente 　
.alinhamento-próprio-*-fimDe acordo com diferentes dispositivos de tela, exiba um único elemento filho na extremidade inferior.Experimente 　
.alinhamento-próprio-*-linha-de-baselineDe acordo com diferentes dispositivos de tela, exiba um único elemento filho na posição de linha base.Experimente 　
Bootstrap4 Objetos MultimídiaBootstrap4 Pequenas Ferramentas