bulma
Un flexbox es un diseño que se utiliza para definir varias columnas y filas que forman una estructura similar a una cuadrícula. Se utiliza para diseñar una estructura de diseño de respuesta flexible sin utilizar flotación o posicionamiento.
Componentes de la caja flexible de Bulma:
- Dirección flexible : la propiedad de dirección flexible permite al usuario establecer la dirección de los elementos en un contenedor flexible con utilidades de dirección, como fila, fila inversa, columna, columna inversa.
- Envoltura flexible : la propiedad de envoltura flexible en Bulma permite al usuario envolver los elementos flexibles en una sola línea o en varias líneas en un contenedor.
- Justificar contenido : se utiliza para describir la alineación del contenedor de caja flexible. Contiene el espacio entre y alrededor de los elementos de contenido a lo largo del eje principal de un contenedor flexible.
- Alinear contenido : el contenido de alineación se utiliza para especificar la alineación entre las líneas dentro de un contenedor flexible.
- Alinear elementos : se utiliza para establecer la alineación de los elementos dentro del contenedor flexible o en la ventana dada. Alinea los elementos flexibles a lo largo del eje.
- Align Self : se utiliza para alinear los elementos seleccionados en el contenedor flexible de muchas maneras diferentes, como extremo flexible, centro, inicio flexible, etc.
- Crecimiento flexible y encogimiento flexible : el crecimiento flexible indica si el elemento flexible puede obtener espacio adicional o no, y el encogimiento flexible se ocupa del espacio que no necesitan los elementos flexibles. Estas clases se utilizan para especificar cuánto crecerá el elemento en comparación con otros elementos dentro de ese contenedor.
Sintaxis:
<div class="Flexbox-Component-Class"> ... </div>
Ejemplo 1: En el siguiente ejemplo, haremos uso de ‘ is-flex-direction-row-reverse ‘ para cambiar la dirección del elemento.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <h1 class="title has-text-centered"> GeeksforGeeks </h1> <div class="columns is-flex-direction-row-reverse"> <div class="p-2 bd-highlight has-background-primary"> 1 </div> <div class="p-2 bd-highlight has-background-primary"> 2 </div> <div class="p-2 bd-highlight has-background-primary"> 3 </div> <div class="p-2 bd-highlight has-background-primary"> 4 </div> <div class="p-2 bd-highlight has-background-primary"> 5 </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, utilizaremos ‘ is-flex-direction-row ‘ para cambiar el tamaño del elemento.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <div class="container"> <h1 class="title has-text-centered"> GeeksforGeeks </h1> <div class="columns is-flex-direction-row"> <div class="p-2 bd-highlight has-background-danger"> one </div> <div class="p-2 bd-highlight has-background-warning"> two </div> <div class="p-2 bd-highlight has-background-danger"> three </div> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/helpers/flexbox-helpers/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA