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