Bulma Alinear contenido – Barcelona Geeks

Bulma es un marco CSS moderno, gratuito y de código abierto construido en flexbox . Viene con componentes y elementos prediseñados que le permiten crear sitios web hermosos y receptivos rápidamente. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.

Bulma align-content se usa para especificar la alineación entre las líneas dentro de un contenedor flexible. Define cómo se alinea cada línea flexible dentro de un flexbox y solo se aplica si se aplica flex-wrap: wrap , es decir, si hay varias líneas de elementos de flexbox presentes.

Clases de contenido de Bulma Align:

is-align-content-flex-start: se utiliza para mostrar las líneas al comienzo del contenedor flexible.
is-align-content-flex-end: Actúa de manera opuesta a is-align-content-flex-start . Se utiliza para alinear las líneas flexibles al final del contenedor flexible.
is-align-content-center: Las líneas se colocan en el centro del contenedor flexible.
is-align-content-space- between: Alinea las líneas flexibles con el mismo espacio entre ellas.
is-align-content-space-around: el espacio se distribuirá equitativamente alrededor de las líneas flexibles.
is-align-content-space-evenly: Esto se usa para colocar los elementos espaciados uniformemente alrededor de los elementos.
is-align-content-start: Alinea los elementos al inicio del contenedor.
is-align-content-end: Alinea los elementos al final del contenedor.
is-align-content-stretch: esto se usa para estirar los elementos para que se ajusten al contenedor
is-align-content-baseline: esto se usa para alinear los elementos con la línea de base del contenedor

Sintaxis:

<div class="is-align-content-flex-start">
  ...
</div>

Ejemplo 1: el siguiente código demuestra la clase is-align-content-flex-start .

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Bulma align content</title>
   <link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
   <style>
        #main {
            height: 200px;
        }
            
        #main div {
            width: 50px;
            margin: 10px;
            font-size: 30px;
        }
   </style>
</head>
<body class="has-text-centered">
   <h1 class="title is-1 has-text-success-dark">
       GeeksforGeeks
   </h1>
   <h2 class="title is-3">Bulma align content</h2>
   <h3 class="title is-5">is-align-content-flex-start</h3>
   <div id="main" class="is-flex is-align-content-flex-start is-flex-wrap-wrap
                         has-background-success">
       <div class="has-background-light">1</div>
       <div class="has-background-light">2</div>
       <div class="has-background-light">3</div>
       <div class="has-background-light">4</div>
   </div>
</body>
</html>

Producción:

Bulma Alinear contenido

Ejemplo 2: El siguiente código demuestra la clase is-align-content-flex-end .

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Bulma align content</title>
   <link rel='stylesheet'  href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
   <style>
        #main {
            height: 200px;
        }
            
        #main div {
            width: 50px;
            margin: 10px;
            font-size: 30px;
        }
   </style>
</head>
<body class="has-text-centered">
   <h1 class="title is-1 has-text-success-dark">
       GeeksforGeeks
   </h1>
   <h2 class="title is-3">Bulma align content</h2>
   <h3 class="title is-5">is-align-content-flex-end</h3>
   <div id="main" class="is-flex is-align-content-flex-end 
                         is-flex-wrap-wrap has-background-success">
       <div class="has-background-light">1</div>
       <div class="has-background-light">2</div>
       <div class="has-background-light">3</div>
       <div class="has-background-light">4</div>
   </div>
</body>
</html>

Producción:

Bulma Alinear contenido

Ejemplo 3: El siguiente código demuestra la clase is-align-content-center .

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Bulma align content</title>
   <link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
   <style>
        #main {
            height: 200px;
        }
            
        #main div {
            width: 50px;
            margin: 10px;
            font-size: 30px;
        }
   </style>
</head>
<body class="has-text-centered">
   <h1 class="title is-1 has-text-success-dark">
       GeeksforGeeks
   </h1>
   <h2 class="title is-3">Bulma align content</h2>
   <h3 class="title is-5">is-align-content-center</h3>
   <div id="main" class="is-flex is-align-content-center is-flex-wrap-wrap 
                         has-background-success">
       <div class="has-background-light">1</div>
       <div class="has-background-light">2</div>
       <div class="has-background-light">3</div>
       <div class="has-background-light">4</div>
   </div>
</body>
</html>

Producción:

Bulma Alinear contenido

Ejemplo 4: El siguiente código demuestra la clase is-align-content-space- between .

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Bulma align content</title>
   <link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
   <style>
        #main {
            height: 200px;
        }
            
        #main div {
            width: 50px;
            margin: 10px;
            font-size: 30px;
        }
   </style>
</head>
<body class="has-text-centered">
   <h1 class="title is-1 has-text-success-dark">
       GeeksforGeeks
   </h1>
   <h2 class="title is-3">Bulma align content</h2>
   <h3 class="title is-5">is-align-content-space-between</h3>
   <div id="main" class="is-flex is-align-content-space-between 
                         is-flex-wrap-wrap has-background-success">
       <div class="has-background-light">1</div>
       <div class="has-background-light">2</div>
       <div class="has-background-light">3</div>
       <div class="has-background-light">4</div>
       <div class="has-background-light">5</div>
       <div class="has-background-light">6</div>
       <div class="has-background-light">7</div>
       <div class="has-background-light">8</div>
   </div>
</body>
</html>

Producción:

Bulma Alinear contenido

Ejemplo 5: El siguiente código demuestra la clase is-align-content-space-around .

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Bulma align content</title>
   <link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
   <style>
        #main {
            height: 200px;
        }
            
        #main div {
            width: 50px;
            margin: 10px;
            font-size: 30px;
        }
   </style>
</head>
<body class="has-text-centered">
   <h1 class="title is-1 has-text-success-dark">
       GeeksforGeeks
   </h1>
   <h2 class="title is-3">Bulma align content</h2>
   <h3 class="title is-5">is-align-content-space-around</h3>
   <div id="main" class="is-flex is-align-content-space-around 
                         is-flex-wrap-wrap has-background-success">
       <div class="has-background-light">1</div>
       <div class="has-background-light">2</div>
       <div class="has-background-light">3</div>
       <div class="has-background-light">4</div>
       <div class="has-background-light">5</div>
       <div class="has-background-light">6</div>
       <div class="has-background-light">7</div>
       <div class="has-background-light">8</div>
   </div>
</body>
</html>

Producción:

Bulma Alinear contenido

Enlace de referencia: https://bulma.io/documentation/helpers/flexbox-helpers/#align-content

Publicación traducida automáticamente

Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta