La propiedad de estilo de justificar contenido en HTML DOM se usa para alinear los elementos horizontalmente cuando no pueden usar todo el espacio disponible. Se utiliza para establecer la posición del elemento. De forma predeterminada, los elementos se colocan al principio del contenedor.
Sintaxis:
- Devuelve la propiedad justificarContenido.
object.style.justifyContent
- Solía establecer la propiedad allowContent.
object.style.justifyContent = "flex-start|flex-end|center| space-between|space-around|initial|inherit"
Valores de propiedad:
- flex-start: se utiliza para alinear elementos flexibles desde el inicio del contenedor.
- flex-end: Se utiliza para alinear elementos flexibles al final del contenedor.
- centro: alinea los elementos flexibles en el centro del contenedor.
- espacio entre: los elementos flexibles se colocan con un espacio uniforme donde el elemento se empuja al principio y el último elemento se empuja al final.
- espacio alrededor: los elementos flexibles se colocan con la misma separación entre sí, las esquinas.
- Espacio uniforme: los elementos se colocan con el mismo espacio entre ellos, pero el espacio desde las esquinas es diferente.
- inicial: Los elementos se colocan de acuerdo con el valor predeterminado.
- heredar: los elementos se colocan de acuerdo con su valor de elemento principal heredado.
Valor devuelto: Devuelve una string que representa la propiedad justificarContenido de un elemento.
Ejemplo 1: Este ejemplo describe el espacio entre el valor de la propiedad.
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style justifyContent Property
</title>
<style>
#GFG {
width:500px;
display:flex;
height: 80px;
border:2px solid black;
background-color:white;
justify-content: space-around;
}
#GFG div {
width: 60px;
height: 80px;
}
</style>
</head>
<body>
<center>
<h1 style = "color:green;width:40%;">
GeeksForGeeks
</h1>
<h2>DOM Style justifyContent Property </h2>
<div id = "GFG">
<div>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/g1-15.png"
width = "60px" height = "80px">
</div>
<div>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/g2-14.png"
width = "60px" height = "80px">
</div>
<div>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/g2-14.png"
width = "60px" height = "80px">
</div>
<div>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/g3-10.png"
width = "60px" height = "80px">
</div>
</div>
<button type = "button" onclick = "geeks()">
Submit
</button>
<!-- Style script used here -->
<script>
function geeks() {
document.getElementById("GFG").style.justifyContent= "space-between";
}
</script>
</center>
</body>
</html>
Salida:
Antes Haga clic en el botón: 
Después Haga clic en el botón:
Ejemplo 2: Este ejemplo describe el valor de propiedad de inicio flexible.
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style justifyContent Property
</title>
<style>
#GFG {
width:500px;
display:flex;
height: 80px;
border:2px solid black;
background-color:white;
justify-content: space-around;
}
#GFG div {
width: 60px;
height: 80px;
}
</style>
</head>
<body>
<center>
<h1 style = "color:green;width:40%;">
GeeksForGeeks
</h1>
<h2>DOM Style justifyContent Property </h2>
<div id = "GFG">
<div>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/g1-15.png"
width = "60px" height = "80px">
</div>
<div>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/g2-14.png"
width = "60px" height = "80px">
</div>
<div>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/g2-14.png"
width = "60px" height = "80px">
</div>
<div>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/g3-10.png"
width = "60px" height = "80px">
</div>
</div>
<button type = "button" onclick = "geeks()">
Submit
</button>
<!-- Style script used here -->
<script>
function geeks() {
document.getElementById("GFG").style.justifyContent= "flex-start";
}
</script>
</center>
</body>
</html>
Salida:
Antes Haga clic en el botón:
Después Haga clic en el botón:
Navegadores admitidos: los navegadores admitidos por la propiedad de justificar el contenido del estilo DOM se enumeran a continuación:
- Google Chrome
- Internet Explorer 12.0
- Firefox
- Ópera
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA