La propiedad de contenido de justificación en CSS se usa para describir la alineación del contenedor de caja flexible. Contiene el espacio entre y alrededor de los elementos de contenido a lo largo del eje principal de un contenedor flexible que se distribuye en un navegador.
Nota: esta propiedad no se puede utilizar para describir artículos o contenedores a lo largo del eje vertical. Para alinear los elementos verticalmente, podemos usar la propiedad align-items
La alineación es posible después de aplicar las propiedades de longitudes y márgenes automáticos, es decir, si hay al menos un elemento flexible, con propiedad de crecimiento flexible , que no sea 0, en un diseño de Flexbox, entonces no afectará y tendrá ningún efecto. no habrá ningún espacio disponible.
Sintaxis:
justify-content: flex-start|flex-end|center|space-between| space-around|space-evenly|initial|inherit;
Valores de propiedad:
flex-start: es el valor predeterminado que se utiliza para alinear elementos flexibles desde el inicio del contenedor.
Sintaxis:
justify-content: flex-start;
Ejemplo: Este ejemplo ilustra la propiedad de justificar el contenido donde el valor de la propiedad se establece en inicio flexible para alinear el elemento desde el inicio del contenedor.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: flex-start;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
Producción:
flex-end: Se utiliza para alinear elementos flexibles al final del contenedor.
Sintaxis:
justify-content: flex-end;
Ejemplo: Este ejemplo ilustra la propiedad de justificar el contenido donde el valor de la propiedad se establece en flex-end .
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: flex-end;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
Producción:
center: Alinea los elementos flexibles en el centro del contenedor.
Sintaxis:
justify-content: center;
Ejemplo: Este ejemplo ilustra la propiedad de justificar el contenido donde el valor de la propiedad se establece en el centro .
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: center;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
Producción:
espacio entre: los elementos flexibles se colocan con un espacio uniforme donde el elemento se empuja para comenzar y el último elemento se empuja para terminar.
Sintaxis:
justify-content: space-between;
Ejemplo: Este ejemplo ilustra la propiedad de justificar el contenido donde el valor de la propiedad se establece en espacio entre .
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-between;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
Producción:
espacio alrededor: los elementos flexibles se colocan con el mismo espacio, es decir, antes, entre y después, entre sí y las esquinas.
Sintaxis:
justify-content: space-around;
Ejemplo: Este ejemplo ilustra la propiedad de justificar el contenido donde el valor de la propiedad se establece en espacio alrededor .
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-around;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksForGeeks</p>
</div>
<div>2
<p>GeeksForGeeks</p>
</div>
<div>3
<p>GeeksForGeeks</p>
</div>
<div>4
<p>GeeksForGeeks</p>
</div>
</div>
</body>
</html>
Producción:
Espacio uniforme: los elementos se colocan con el mismo espacio entre ellos, pero el espacio desde las esquinas es diferente.
Sintaxis:
justify-content: space-evenly;
Ejemplo: Este ejemplo ilustra la propiedad de justificar el contenido donde el valor de la propiedad se establece en espacio uniforme .
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: space-evenly;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
Producción:
initial : Los elementos se colocan de acuerdo con el valor predeterminado.
Sintaxis:
justify-content: initial;
Ejemplo: este ejemplo ilustra la propiedad de justificar el contenido donde el valor de la propiedad se establece en initial .
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: initial;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
Producción:
heredar : los elementos se colocan de acuerdo con su valor de elemento principal heredado.
Sintaxis:
justify-content: inherit;
Ejemplo: Este ejemplo ilustra la propiedad de justificar el contenido donde el valor de la propiedad se establece en heredar .
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property </title>
<style>
#box {
display: flex;
border: 1px solid black;
justify-content: inherit;
}
#box div {
width: 110px;
height: 120px;
border: 1px solid black;
background: linear-gradient(green, silver);
}
</style>
</head>
<body>
<div id="box">
<div>1
<p>GeeksforGeeks</p>
</div>
<div>2
<p>GeeksforGeeks</p>
</div>
<div>3
<p>GeeksforGeeks</p>
</div>
<div>4
<p>GeeksforGeeks</p>
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de contenido de justificación de CSS se enumeran a continuación:
- Google Chrome 29.0, 21.0 -webkit-
- Internet Explorer 11.0
- Microsoft Edge 12.0
- Firefox 28.0, 18.0 -moz-
- Ópera 17.0
- Safari 9.0, 6.1 -webkit-
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA