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.
El contenido de Bulma Justify se usa para describir la alineación del contenedor de la caja flexible. Contiene el espacio entre y alrededor de los elementos de contenido a lo largo del eje principal de un contenedor flexible. Básicamente se usa para controlar cómo se colocan los elementos flexibles y de cuadrícula a lo largo del eje principal de un contenedor.
Justificar las clases de contenido:
- is-justify-content-flex-start: se utiliza para alinear elementos flexibles o componentes secundarios desde el principio del contenedor.
- is-justify-content-flex-end: Actúa de manera opuesta a is-justify-content-flex-start. Se utiliza para alinear el componente infantil al final del contenedor.
- is-justify-content-center: Alinea el componente hijo en el centro del contenedor.
- is-justify-content-space- between: los componentes secundarios se colocan con el mismo espacio donde el elemento se empuja para comenzar y el último elemento se empuja para terminar.
- is-justify-content-space-around: El espacio entre el componente hijo y el espacio de las esquinas es el mismo.
- is-justify-content-space-evenly: los componentes secundarios se colocan con el mismo espacio entre ellos, pero el espacio desde las esquinas es diferente.
- is-justify-content-start: Alinea el componente hijo al inicio del contenedor.
- is-justify-content-end: Alinea el componente hijo al final del contenedor.
- is-justify-content-left: Alinea el componente hijo a la izquierda del contenedor.
- is-justify-content-right: Alinea el componente hijo a la derecha del contenedor.
Sintaxis:
<element class="...">...</element>
Ejemplo 1: El siguiente ejemplo cubre la clase is-justify-content-flex-start aplicada al elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Justify content</title>
<link rel='stylesheet'
href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main div {
margin-top: 10px;
width: 110px;
height: 120px;
border: 1px solid black;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma Justify content</h2>
<div id="main"
class="is-flex
is-justify-content-flex-start
is-flex-direction-row">
<div class="has-background-success-dark">1</div>
<div class="has-background-success">2</div>
<div class="has-background-primary-dark">3</div>
<div class="has-background-primary">4</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo cubre la clase is-justify-content-flex-end aplicada al elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Justify content</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main div {
margin-top: 10px;
width: 110px;
height: 120px;
border: 1px solid black;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma Justify content</h2>
<h3 class="title is-5">is-justify-content-flex-end</h3>
<div id="main" class="is-flex
is-justify-content-flex-end is-flex-direction-row">
<div class="has-background-success-dark">1</div>
<div class="has-background-success">2</div>
<div class="has-background-primary-dark">3</div>
<div class="has-background-primary">4</div>
</div>
</body>
</html>
Producción:
Bulma justifica el contenido
Ejemplo 3: El siguiente ejemplo cubre la clase is-justify-content-center aplicada a los elementos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Justify content</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main div {
margin-top: 10px;
width: 110px;
height: 120px;
border: 1px solid black;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma Justify content</h2>
<h3 class="title is-5">is-justify-content-center</h3>
<div id="main" class="is-flex
is-justify-content-center is-flex-direction-row">
<div class="has-background-success-dark">1</div>
<div class="has-background-success">2</div>
<div class="has-background-primary-dark">3</div>
<div class="has-background-primary">4</div>
</div>
</body>
</html>
Producción:
Bulma justifica el contenido
Ejemplo 4: El siguiente ejemplo cubre la clase is-justify-content-space- between aplicada al elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Justify content</title>
<link rel='stylesheet' href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
#main div {
margin-top: 10px;
width: 110px;
height: 120px;
border: 1px solid black;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="title is-1 has-text-success-dark">
GeeksforGeeks
</h1>
<h2 class="title is-3">Bulma Justify content</h2>
<h3 class="title is-5">is-justify-content-space-between</h3>
<div id="main" class="is-flex
is-justify-content-space-between is-flex-direction-row">
<div class="has-background-success-dark">1</div>
<div class="has-background-success">2</div>
<div class="has-background-primary-dark">3</div>
<div class="has-background-primary">4</div>
</div>
</body>
</html>
Producción:
Bulma justifica el contenido
Referencia: https://bulma.io/documentation/helpers/flexbox-helpers/#justify-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