Utilitários Flexbox em bootstrap com exemplos
O Módulo de Layout de Caixa Flexível no bootstrap é usado para projetar a estrutura de layout flexível e responsiva. É usado no Bootstrap 4.
- A classe d-flex é usada para criar uma sintaxe simples de contêiner flexbox
:
<div class="d-flex p-2"></div>
- A classe d-inline-flex é usada para criar um contêiner flexbox embutido.
Sintaxe:
<div class="d-inline-flex p-2"></div>
- .d-flex e .d-inline-flex podem ser usados para todos os pontos de interrupção (sm, md, lg, xl) como .d-sm-flex, .d-sm-inline-flex, etc.
Sintaxe:
<div class="d-sm-flex p-2"></div> <div class="d-sm-inline-flex p-2"></div>
Exemplo 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Flex</h2>
<div class="d-flex p-3 bg-success text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success ">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Exemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Inline Flex</h2>
<div class="d-inline-flex p-3 bg-success text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success ">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Direção horizontal e vertical do Flexbox:
A direção dos flex items pode ser posicionada em um flex container.
- Para definir uma direção horizontal (o padrão do navegador), use .flex-row .
Sintaxe:
<div class="d-flex flex-row"></div>
- Para iniciar a direção horizontal do lado oposto, use .flex-row-reverse .
Sintaxe:
<div class="d-flex flex-row-reverse"></div>
- Para definir uma direção vertical, use .flex-column .
Sintaxe:
<div class="d-flex flex-column"></div>
- Para iniciar a direção vertical do lado oposto, use .flex-column-reverse .
Sintaxe:
<div class="d-flex flex-column-reverse"></div>
- Flex-direction pode ser usado para todos os pontos de interrupção (sm, md, lg, xl) como .flex-sm-row, flex-sm-row-reverse, etc.
Sintaxe:
<div class="d-flex flex-column-reverse"></div> <div class="d-flex flex-column"></div>
Exemplo 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Horizontal Direction Flex</h2>
<br>
<div class="d-flex flex-row bg-success mb-3 text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success ">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
<br>
<div class="d-flex flex-row-reverse bg-success text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Exemplo 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Vertical Direction Flex</h2>
<br>
<div class="d-flex flex-column bg-success mb-3 text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success ">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
<br>
<div class="d-flex flex-column-reverse bg-success text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Justificar o conteúdo:
Para alterar o alinhamento dos itens flexíveis, pode-se usar as classes .justify-content- * .
* pode ser qualquer um deles start (default), end, center, between ou around .
Da mesma forma, justify-content pode ser usado para todos os pontos de interrupção (sm, md, lg, xl) como .justify-content-sm-start, .justify-content-sm-end, etc.
- Sintaxe:
<div class="d-flex justify-content-start"></div>
Exemplo 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Justify Content</h2>
<br>
<div class="d-flex justify-content-start bg-success mb-3 text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success ">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
<div class="d-flex justify-content-end bg-success text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
<br>
<div class="d-flex justify-content-center bg-success text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
<br>
<div class="d-flex justify-content-between bg-success text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
<br>
<div class="d-flex justify-content-around bg-success text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Preenchimento de larguras de itens flexíveis:
Os itens flexíveis podem ser forçados em larguras iguais usando a classe .flex-fill .
.flex-fill pode ser usado para todos os pontos de interrupção (sm, md, lg, xl) como .flex-sm-fill, etc.
- Sintaxe:
<div class="p-2 flex-fill"></div>
Exemplo 6:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Fill / Equal Widths</h2>
<p>Use .flex-fill on flex items to force them into equal widths:</p>
<div class="d-flex bg-success mb-3 text-white">
<div class="p-2 flex-fill bg-success">Geeks 1</div>
<div class="p-2 flex-fill bg-success">Geeks 2</div>
<div class="p-2 flex-fill bg-success">Geeks 3</div>
</div>
<p>Example without .flex-fill:</p>
<div class="d-flex bg-success mb-3 text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Pedido:
As classes .order são usadas para alterar a ordem de visualização de um item flexível.
O pedido é feito com base em números de 0 a 12.
0 tem a prioridade mais alta.
.order pode ser usado para todos os pontos de interrupção (sm, md, lg, xl) como .order-sm-0 a .order-sm-12, etc.
- Sintaxe:
<div class="p-2 order-4"></div>
Exemplo 7:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Order</h2>
<div class="d-flex mb-3 text-white">
<div class="p-2 order-3 bg-success">Geeks 1</div>
<div class="p-2 order-2 bg-success">Geeks 2</div>
<div class="p-2 order-1 bg-success">Geeks 3</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Automação de margens:
- .mr-auto usado para empurrar itens para a direita.
- .ml-auto usado para empurrar itens para a esquerda
- Sintaxe:
<div class="p-2 mr-auto"></div>
.
Exemplo 8:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Auto Margins</h2>
<div class="d-flex mb-3 bg-success text-white">
<div class="p-2 mr-auto bg-success">Geeks 1</div>
<div class="p-2 bg-success">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
<div class="d-flex mb-3 bg-success text-white">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success">Geeks 2</div>
<div class="p-2 ml-auto bg-success">Geeks 3</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Embalagem de item flexível:
.flex-nowrap (padrão), .flex-wrap e .flex-wrap-reverse são usados para embalar os flex items em um flex container.
.flex-wrap pode ser usado para todos os pontos de interrupção (sm, md, lg, xl) como .flex-sm-nowrap, .flex-sm-wrap, etc.
- Sintaxe:
<div class="p-2 border"></div>
Exemplo 9:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Wrap</h2>
<p><code>.flex-wrap:</code></p>
<div class="d-flex flex-wrap text-white bg-light">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
<div class="p-2 border bg-success">Geeks 4</div>
<div class="p-2 border bg-success">Geeks 5</div>
<div class="p-2 border bg-success">Geeks 6</div>
<div class="p-2 border bg-success">Geeks 7</div>
<div class="p-2 border bg-success">Geeks 8</div>
<div class="p-2 border bg-success">Geeks 9</div>
</div>
<br>
<p><code>.flex-wrap-reverse:</code></p>
<div class="d-flex flex-wrap-reverse text-white bg-light">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
<div class="p-2 border bg-success">Geeks 4</div>
<div class="p-2 border bg-success">Geeks 5</div>
<div class="p-2 border bg-success">Geeks 6</div>
<div class="p-2 border bg-success">Geeks 7</div>
<div class="p-2 border bg-success">Geeks 8</div>
<div class="p-2 border bg-success">Geeks 9</div>
</div>
<br>
<p><code>.flex-nowrap:</code></p>
<div class="d-flex flex-nowrap text-white bg-light">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
<div class="p-2 border bg-success">Geeks 4</div>
<div class="p-2 border bg-success">Geeks 5</div>
<div class="p-2 border bg-success">Geeks 6</div>
<div class="p-2 border bg-success">Geeks 7</div>
<div class="p-2 border bg-success">Geeks 8</div>
<div class="p-2 border bg-success">Geeks 9</div>
</div>
<br>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Alinhar Conteúdo
Basicamente, ele é usado para alinhamento vertical de itens flexíveis.
Alinhar o conteúdo pode ser implementado de várias maneiras.
- .align-content-start
- .align-content-end
- .align-content-center
- .align-content-around
- .align-content-stretch
- .align-content-sm-start
- Da mesma forma para sm, md, lg, xl
- Sintaxe:
<div class="p-2 align-content-start"></div>
Exemplo 10:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Align Content</h2>
<p><code>.align-content-start (default):</code></p>
<div class="d-flex flex-wrap align-content-start bg-light"
style="height:100px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
<div class="p-2 border bg-success">Geeks 4</div>
<div class="p-2 border bg-success">Geeks 5</div>
<div class="p-2 border bg-success">Geeks 6</div>
<div class="p-2 border bg-success">Geeks 7</div>
<div class="p-2 border bg-success">Geeks 8</div>
<div class="p-2 border bg-success">Geeks 9</div>
</div>
<p><code>.align-content-around:</code></p>
<div class="d-flex flex-wrap align-content-around bg-light"
style="height:100px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
<div class="p-2 border bg-success">Geeks 4</div>
<div class="p-2 border bg-success">Geeks 5</div>
<div class="p-2 border bg-success">Geeks 6</div>
<div class="p-2 border bg-success">Geeks 7</div>
<div class="p-2 border bg-success">Geeks 8</div>
<div class="p-2 border bg-success">Geeks 9</div>
</div>
<p><code>.align-content-stretch:</code></p>
<div class="d-flex flex-wrap align-content-stretch bg-light"
style="height:100px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
<div class="p-2 border bg-success">Geeks 4</div>
<div class="p-2 border bg-success">Geeks 5</div>
<div class="p-2 border bg-success">Geeks 6</div>
<div class="p-2 border bg-success">Geeks 7</div>
<div class="p-2 border bg-success">Geeks 8</div>
<div class="p-2 border bg-success">Geeks 9</div>
</div>
<br>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Alinhar itens
Use a classe de itens de alinhamento para alterar o alinhamento dos itens flexíveis no eixo transversal.
itens de alinhamento podem ser implementados de várias maneiras.
- .align-items-start
- .align-items-end
- .align-items-center
- .align-items-baseline
- .align-items-stretch
- .align-items-sm-start
- Da mesma forma para sm, md, lg, xl
- Sintaxe:
<div class="p-2 align-items-start"></div>
Exemplo 11:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" items="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Align items</h2>
<p><code>.align-items-start:</code></p>
<div class="d-flex flex-wrap align-items-start bg-light" style="height:70px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
</div>
<p><code>.align-items-end:</code></p>
<div class="d-flex flex-wrap align-items-end bg-light" style="height:70px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
</div>
<p><code>.align-items-center:</code></p>
<div class="d-flex flex-wrap align-items-center bg-light" style="height:70px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
</div>
<p><code>.align-items-baseline:</code></p>
<div class="d-flex flex-wrap align-items-around bg-light" style="height:70px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
</div>
<p><code>.align-items-stretch(default):</code></p>
<div class="d-flex flex-wrap align-items-stretch bg-light" style="height:70px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
</div>
<br>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Alinhar-se
A classe align-self pode ser usada para alterar o alinhamento no eixo transversal.
Alinhar-se pode ser implementado de várias maneiras.
- .align-self-start
- .align-self-end
- .align-self-center
- .align-self-around
- .align-self-stretch
- .align-self-sm-start
- Da mesma forma para sm, md, lg, xl
- Sintaxe:
<div class="p-2 align-self-center"></div>
Exemplo 12:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" self="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Align self</h2>
<p><code>.align-self-start:</code></p>
<div class="d-flex bg-light" style="height:80px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border align-self-start bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
</div>
<p><code>.align-self-end:</code></p>
<div class="d-flex bg-light" style="height:80px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border align-self-end bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
</div>
<p><code>.align-self-center:</code></p>
<div class="d-flex bg-light" style="height:80px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border align-self-center bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
</div>
<p><code>.align-self-baseline:</code></p>
<div class="d-flex bg-light" style="height:80px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border align-self-baseline bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
</div>
<p><code>.align-self-stretch(default):</code></p>
<div class="d-flex bg-light" style="height:80px">
<div class="p-2 border bg-success">Geeks 1</div>
<div class="p-2 border align-self-stretch bg-success">Geeks 2</div>
<div class="p-2 border bg-success">Geeks 3</div>
</div>
<br>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Crescendo e diminuindo o espaço disponível
.flex-grow- * é usado para aumentar o item flexível para preencher o espaço disponível.
.flex-shrink- * é usado para encolher o item flexível.
flex-grow e flex-shrink podem ser implementados da seguinte forma.
- .flex- {crescer | encolher} -0
- .flex- {crescer | encolher} -1
- Da mesma forma para sm, md, lg, xl
- Sintaxe:
<div class="p-2 flex grow-1"></div>
Exemplo 13:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" self="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>GeeksForGeeks Bootstrap Example</title>
</head>
<body>
<div class="container mt-3">
<h2>Grow</h2>
<p>Use <code>.flex-grow-1</code> on a Geeks to take up the rest of the space:</p>
<div class="d-flex mb-3">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success">Geeks 2</div>
<div class="p-2 flex-grow-1 bg-success">Geeks 3</div>
</div>
<p>Example without <code>.flex-grow-1</code>:</p>
<div class="d-flex mb-3">
<div class="p-2 bg-success">Geeks 1</div>
<div class="p-2 bg-success">Geeks 2</div>
<div class="p-2 bg-success">Geeks 3</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>Saída:
Navegador compatível:
- Google Chrome
- Internet Explorer
- Raposa de fogo
- Ópera
- Safári
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva
