Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox. Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo.
En este artículo, aprenderemos sobre las propiedades de crecimiento y contracción flexibles de Bulma. El marco de Bulma permite a los usuarios utilizar las propiedades CSS flex-shrink y flex-grow en un contenedor. Flex-grow indica si el elemento flexible puede obtener espacio adicional o no, mientras que flex-shrink se ocupa del espacio que no necesitan los elementos flexibles.
Clases de Bulma Flex:
- is-flex-grow-0: esta clase se usa para especificar cuánto crecerá el elemento flexible en relación con el resto de los elementos flexibles dentro del mismo contenedor.
- is-flex-shrink-0: esta clase se usa para especificar cómo se reducirá el elemento flexible en relación con el resto de los elementos flexibles dentro del mismo contenedor.
Sintaxis:
- Flex-crecimiento:
<div class="columns">
<div class="column is-flex-grow-2">Flex item</div>
<div class="column">Second flex item</div>
...
</div>
- Flexión-encogimiento:
<div class="columns">
<div class="column is-flex-shrink-2">Flex item</div>
<div class="column">Second flex item</div>
....
</div>
Ejemplo: El siguiente ejemplo ilustra la propiedad Flex-Grow y Flex-Shrink de Bulma .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </head> <body> <div class="container content has-text-centered"> <h1 class="title has-text-success"> GeekforGeeks </h1> <h2 class="subtitle has-text-info"> Bulma Flex-grow and Flex-shrink </h2> <!-- Flex-grow property --> <div class="columns has-background-success"> <div class="m-4 column is-flex-grow-5 has-background-warning"> Flex item </div> <div class="m-4 column has-background-warning"> Second flex item </div> <div class="m-4 column has-background-warning"> Third flex item </div> </div> <br/> <!-- Flex-shrink property --> <div class="columns"> <div class="column is-full has-background-danger"> Flex item </div> <div class="column is-flex-shrink-1 has-background-success"> Second flex item </div> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/helpers/flexbox-helpers/
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA