¿Cómo estirar flexbox para llenar todo el contenedor en Bootstrap?

Nos dan un documento HTML (vinculado con Bootstrap) con un flexbox y un contenedor. El objetivo es estirar el flexbox para llenar todo el contenedor. Esto se puede lograr mediante dos enfoques diferentes, usando clases flex-fill o flex-grow en Bootstrap.

Enfoque 1: usar la clase de relleno flexible : la clase .flex-fill extiende el ancho de un elemento para llenar todo el espacio horizontal. Si hay varios elementos hermanos a los que se aplica esta clase, el espacio horizontal se divide por igual entre ellos.

Sintaxis:

<div class="flex-fill"></div>

Ejemplo:

<!Doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
        crossorigin="anonymous">
  
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous">
    </script>
  
    <title>GFG Bootstrap Flexbox</title>
</head>
  
<body>
    <p>Single flexbox without .flex-fill</p>
  
    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border">
            GFG Flexbox 1
        </div>
    </div>
  
    <p>Single flexbox with .flex-fill</p>
  
    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border flex-fill">
            GFG Flexbox 1
        </div>
    </div>
  
    <p>Multiple flexbox without .flex-fill</p>
  
    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border">
            GFG Flexbox 1
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 2
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 3
        </div>
    </div>
  
    <p>Multiple flexbox with .flex-fill</p>
  
    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border flex-fill">
            GFG Flexbox 1
        </div>
        <div class="bg-success p-2 border flex-fill">
            GFG Flexbox 2
        </div>
        <div class="bg-success p-2 border flex-fill">
            GFG Flexbox 3
        </div>
    </div>
</body>
  
</html>
  • Producción:

Enfoque 2: uso de la clase flex-grow : también podemos modificar el ancho de la caja flexible mediante el uso de la clase flex-grow-* de Bootstrap.

.flex-grow-1 estira el elemento a su ancho máximo dando a los otros elementos (si los hay) solo la cantidad necesaria de espacio.

Sintaxis:

<div class="flex-grow-1"></div>

Ejemplo:

<!Doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
        crossorigin="anonymous">
      
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <p>Single flexbox without .flex-grow-1</p>
  
    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border">
            GFG Flexbox 1
        </div>
    </div>
  
    <p>Single flexbox with .flex-grow-1</p>
  
    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border flex-grow-1">
            GFG Flexbox 1
        </div>
    </div>
  
    <p>Multiple flexbox without .flex-grow-1</p>
  
    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border">
            GFG Flexbox 1
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 2
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 3
        </div>
    </div>
  
    <p>Multiple flexbox with .flex-grow-1</p>
  
    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border flex-grow-1">
            GFG Flexbox 1
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 2
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 3
        </div>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por tanujatiwari04 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *