En este artículo, veremos la dirección flexible en Bulma . En Bulma, las propiedades de flexbox se utilizan como ayudantes. 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. A veces, las clases horizontales se pueden omitir ya que la dirección predeterminada en el navegador es fila.
Clases de dirección flexible:
- is-flex-direction-row: esta clase de flexbox permite al usuario establecer una dirección horizontal del elemento flexible.
- is-flex-direction-row-reverse: esta clase de flexbox permite al usuario establecer una dirección horizontal del elemento flexible en sentido inverso o al revés.
- is-flex-direction-column: esta clase de flexbox permite al usuario establecer una dirección vertical del elemento flexible.
- is-flex-direction-column-reverse: esta clase de flexbox permite al usuario establecer una dirección vertical del elemento flexible en sentido inverso o al revés.
Sintaxis:
// flex-row <div class="is-flex-direction-row"> .... </div> // flex-row-reverse <div class="is-flex-direction-row-reverse"> .... </div> // flex-column <div class="is-flex-direction-column"> .... </div> // flex-column-reverse <div class="is-flex-direction-column-reverse"> .... </div>
Ejemplo 1: Los siguientes ejemplos ilustran la dirección de fila flexible de Bulma :
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-primary"> Flex item 1 </div> <div class="p-2 bd-highlight has-background-warning"> Flex item 2 </div> <div class="p-2 bd-highlight has-background-danger"> Flex item 3 </div> </div> </div> </body> </html>
Producción:
dirección bulma flex
Ejemplo 2: Los siguientes ejemplos ilustran la dirección inversa de fila flexible de Bulma :
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-grey-lighter"> Flex item 1 </div> <div class="p-2 bd-highlight has-background-primary"> Flex item 2 </div> <div class="p-2 bd-highlight has-background-warning"> Flex item 3 </div> </div> </div> </body> </html>
Producción:
dirección bulma flex
Ejemplo 3: Los siguientes ejemplos ilustran la dirección de la columna flexible de Bulma :
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="is-flex-direction-column"> <div class="p-2 bd-highlight has-background-grey-lighter"> Flex item 1 </div> <div class="p-2 bd-highlight has-background-primary"> Flex item 2 </div> <div class="p-2 bd-highlight has-background-warning"> Flex item 3 </div> </div> </div> </body> </html>
Producción:
dirección bulma flex
Ejemplo 4: Los siguientes ejemplos ilustran la dirección inversa de la columna flexible de Bulma :
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="is-flex-direction-column-reverse"> <div class="p-2 bd-highlight has-background-grey-lighter"> Flex item 1 </div> <div class="p-2 bd-highlight has-background-danger"> Flex item 2 </div> <div class="p-2 bd-highlight has-background-warning"> Flex item 3 </div> </div> </div> </body> </html>
Producción:
dirección bulma flex
Referencia: https://bulma.io/documentation/helpers/flexbox-helpers/#flex-direction
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA