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 self se utiliza para alinear los artículos seleccionados en el contenedor flexible de muchas maneras diferentes, como extremo flexible, centro, inicio flexible, etc.
Clases propias de Bulma Align:
- is-align-self-auto: se utiliza para heredar la propiedad align-items de su contenedor principal o se extiende si no tiene un contenedor principal. Es un valor predeterminado.
- is-align-self-flex-start: Se utiliza para alinear el elemento seleccionado al principio del contenedor flexible.
- is-align-self-flex-end: Se utiliza para posicionar el elemento seleccionado al final del contenedor flexible.
- is-align-self-center: Se utiliza para colocar el elemento en el centro del contenedor flexible.
- is-align-self-baseline: con esta clase, el elemento se coloca en la línea de base del contenedor flexible.
- is-align-self-stretch: Se utiliza para posicionar los elementos para que encajen en el contenedor.
Sintaxis:
<div class="Align-self-classest"> .... </div>
Ejemplo 1: el siguiente código demuestra la clase is-align-self-flex-start .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Align Self</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
border: 4px solid black;
}
#main div {
width: 100px;
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 Self</h2>
<h3 class="title is-5">is-align-self-flex-start</h3>
<div id="main" class="is-flex is-flex-direction-row">
<div class="has-background-success
is-align-self-flex-start">Geeks</div>
<div class="has-background-success-dark">For</div>
<div class="has-background-primary-dark">Geeks</div>
<div class="has-background-primary">GPL</div>
</div>
</body>
</html>
Producción:
Bulma se alinea
Ejemplo 2: El siguiente código demuestra la clase is-align-self-flex-end .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Align Self</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
border: 4px solid black;
}
#main div {
width: 100px;
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 Self</h2>
<h3 class="title is-5">is-align-self-flex-end</h3>
<div id="main" class="is-flex is-flex-direction-row">
<div class="has-background-success
is-align-self-flex-end">Geeks</div>
<div class="has-background-success-dark">For</div>
<div class="has-background-primary-dark">Geeks</div>
<div class="has-background-primary">GPL</div>
</div>
</body>
</html>
Producción:
Bulma se alinea
Ejemplo 3: El siguiente código demuestra la clase is-align-self-center .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Align Self</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
border: 4px solid black;
}
#main div {
width: 100px;
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 Self</h2>
<h3 class="title is-5">is-align-self-center</h3>
<div id="main" class="is-flex is-flex-direction-row">
<div class="has-background-success
is-align-self-center">Geeks</div>
<div class="has-background-success-dark">For</div>
<div class="has-background-primary-dark">Geeks</div>
<div class="has-background-primary">GPL</div>
</div>
</body>
</html>
Producción:
Bulma se alinea
Ejemplo 4: El siguiente código demuestra la clase is-align-self-auto .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Align Self</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main {
height: 200px;
border: 4px solid black;
}
#main div {
width: 100px;
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 Self</h2>
<h3 class="title is-5">is-align-self-auto</h3>
<div id="main" class="is-flex is-flex-direction-row">
<div class="has-background-success
is-align-self-auto">Geeks</div>
<div class="has-background-success-dark">For</div>
<div class="has-background-primary-dark">Geeks</div>
<div class="has-background-primary">GPL</div>
</div>
</body>
</html>
Producción:
Bulma se alinea
Referencia: https://bulma.io/documentation/helpers/flexbox-helpers/#align-self
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA