En este artículo, aprenderemos sobre la propiedad de envoltura flexible en Bulma . En Bulma, la propiedad flex-wrap se usa como ayuda. La propiedad flex-wrap en Bulma permite al usuario envolver los elementos flexibles en una sola línea o en múltiples líneas en un contenedor. Hay tres clases disponibles en Bulma que se utilizan para envolver los artículos flexibles.
Clases de Bulma Flex Wrap:
- is-flex-wrap-nowrap: esta clase de flex-wrap es una clase predeterminada en la que el elemento flexible se envuelve en el contenedor.
- is-flex-wrap-wrap: esta clase de envoltura flexible se usa para envolver artículos flexibles.
- is-flex-wrap-wrap-reverse: esta clase de envoltura flexible se usa para envolver artículos flexibles en orden inverso.
Sintaxis:
<div class="columns Flex-Wrap-Class>
....
</div>
Ejemplo 1: Los siguientes ejemplos ilustran la propiedad is-flex-wrap-wrap 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> <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Flex Wrap</b><br><br> <div class="container"> <div class="p-4 columns is-flex-wrap-wrap has-background-primary"> <div class="p-2 box has-background-light">Flex item 1</div> <div class="p-2 box has-background-light">Flex item 2</div> <div class="p-2 box has-background-light">Flex item 3</div> <div class="p-2 box has-background-light">Flex item 4</div> <div class="p-2 box has-background-light">Flex item 5</div> <div class="p-2 box has-background-light">Flex item 6</div> <div class="p-2 box has-background-light">Flex item 7</div> <div class="p-2 box has-background-light">Flex item 8</div> <div class="p-2 box has-background-light">Flex item 9</div> </div> </div> </body> </html>
Producción:
Envoltura flexible de Bulma
Ejemplo 2: Los siguientes ejemplos ilustran la propiedad is-flex-wrap-wrap-reverse 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> <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Flex Wrap</b><br><br> <div class="container"> <div class="p-4 columns is-flex-wrap-wrap-reverse has-background-primary"> <div class="p-2 box has-background-light">Flex item 1</div> <div class="p-2 box has-background-light">Flex item 2</div> <div class="p-2 box has-background-light">Flex item 3</div> <div class="p-2 box has-background-light">Flex item 4</div> <div class="p-2 box has-background-light">Flex item 5</div> <div class="p-2 box has-background-light">Flex item 6</div> <div class="p-2 box has-background-light">Flex item 7</div> <div class="p-2 box has-background-light">Flex item 8</div> <div class="p-2 box has-background-light">Flex item 9</div> </div> </div> </body> </html>
Producción:
Envoltura flexible de Bulma
Ejemplo 3: Los siguientes ejemplos ilustran la propiedad is-flex-wrap-nowrap 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> <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Flex Wrap</b><br><br> <div class="container"> <div class="p-4 columns is-flex-wrap-nowrap has-background-primary"> <div class="p-2 box has-background-light">Flex item 1</div> <div class="p-2 box has-background-light">Flex item 2</div> <div class="p-2 box has-background-light">Flex item 3</div> <div class="p-2 box has-background-light">Flex item 4</div> <div class="p-2 box has-background-light">Flex item 5</div> <div class="p-2 box has-background-light">Flex item 6</div> <div class="p-2 box has-background-light">Flex item 7</div> <div class="p-2 box has-background-light">Flex item 8</div> <div class="p-2 box has-background-light">Flex item 9</div> </div> </div> </body> </html>
Producción:
Envoltura flexible de Bulma
Referencia: https://bulma.io/documentation/helpers/flexbox-helpers/#flex-wrap
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA