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.
Las clases de elementos de alineación de Bulma se utilizan 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.
Clases de elementos de alineación de Bulma:
- is-align-items-flex-start: Se utiliza para posicionar elementos al principio del contenedor.
- is-align-items-flex-end: Se utiliza para posicionar elementos al final del contenedor.
- is-align-items-center: Se utiliza para posicionar los elementos en el centro del contenedor de forma vertical.
- is-align-items-self-start: Alinea las líneas flexibles con el mismo espacio entre ellas.
- is-align-items-self-end: el espacio se distribuirá equitativamente alrededor de las líneas flexibles.
- is-align-items-start: Alinea los elementos al inicio del contenedor.
- is-align-items-end: Alinea los elementos al final del contenedor.
- is-align-items-stretch: Esto se usa para estirar los elementos para que se ajusten al contenedor y es el valor predeterminado
- is-align-items-baseline: esto se usa para alinear los elementos con la línea de base del contenedor
Sintaxis:
<div class="is-align-items-flex-start"> ... </div>
Ejemplo 1: El siguiente código demuestra la clase t is-align-items-flex-star .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma align items</title>
<link rel='stylesheet'
href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
border: 2px solid black;
}
#main div {
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 items</h2>
<h3 class="title is-5">is-align-items-flex-start</h3>
<div id="main"
class="is-flex
is-align-items-flex-start
is-flex-wrap-wrap
has-background-success">
<div class="has-background-warning-dark">Warning</div>
<div class="has-background-danger-dark">Danger</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra la clase is-align-items-flex-end .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma align items</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
border: 2px solid black;
}
#main div {
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 items</h2>
<h3 class="title is-5">is-align-items-flex-end</h3>
<div id="main"
class="is-flex
is-align-items-flex-end
is-flex-wrap-wrap
has-background-success">
<div class="has-background-warning-dark">Warning</div>
<div class="has-background-danger-dark">Danger</div>
</div>
</body>
</html>
Producción:
Bulma Alinear elementos
Ejemplo 3: El siguiente código demuestra la clase is-align-items-center .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma align items</title>
<link rel='stylesheet'
href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
border: 2px solid black;
}
#main div {
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 items</h2>
<h3 class="title is-5">is-align-items-center</h3>
<div id="main"
class="is-flex
is-align-items-center
is-flex-wrap-wrap
has-background-success">
<div class="has-background-warning-dark">Warning</div>
<div class="has-background-danger-dark">Danger</div>
</div>
</body>
</html>
Producción:
Bulma Alinear elementos
Referencia: https://bulma.io/documentation/helpers/flexbox-helpers/#align-items
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA