La propiedad de contenido de lugar de CSS es la abreviatura de la propiedad de contenido de alineación y justificación de contenido . Las propiedades abreviadas en CSS significan que puede establecer los valores de múltiples propiedades en una sola propiedad. Aquí, la propiedad de contenido de lugar puede contener el valor de los valores de propiedad de contenido de alineación y de justificación de contenido.
Sintaxis:
place-content: align-content-property-value justify-content-property-value
Valores de propiedad: esta propiedad acepta todos los valores de combinación posibles que pueden hacer los valores de propiedad align-content y allow-content.
- inicio: esta propiedad se usa para alinear elementos flexibles desde el inicio del contenedor.
- end: esta propiedad se usa para alinear elementos flexibles desde el final del contenedor.
- flex-start: esta propiedad muestra las líneas al comienzo del contenedor flexible.
- flex-end: esta propiedad muestra las líneas flexibles al final del contenedor flexible.
- center: esta propiedad alinea los elementos flexibles en el centro del contenedor.
- espacio alrededor: esta propiedad distribuye el espacio por igual alrededor de las líneas flexibles.
- espacio entre: esta propiedad distribuye el espacio de las líneas flexibles con el mismo espacio entre ellas.
- space-evenly: esta propiedad define la posición con el mismo espaciado entre ellos pero el espaciado desde las esquinas es diferente.
- estirar: esta propiedad define la línea estirada para tomar el espacio restante del contenedor flexible. Es el valor predeterminado.
Los siguientes ejemplos ilustran la propiedad de contenido de lugar de CSS:
Ejemplo 1: En este ejemplo, utilizaremos los siguientes valores de propiedad de contenido de lugar: centro de inicio flexible.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS place-content Property</title>
<style>
h1 {
color: green;
}
#container {
display: flex;
height: 200px;
width: 460px;
flex-wrap: wrap;
background-color: gray;
/* Setting property values */
place-content: flex-start center;
}
div > div {
border: 2px solid black;
width: 60px;
background-color: green;
color: white;
}
.short {
font-size: 12px;
height: 30px;
}
.tall {
font-size: 14px;
height: 40px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b>CSS place-content Property</b>
<div id="container">
<div class="short">Geeks</div>
<div class="short">
Computer<br />
Science
</div>
<div class="tall">
Geeks<br />
for
</div>
<div class="tall">
Portal<br />
for
</div>
<div class="tall"></div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: Aquí usaremos place-content: flex-start start property value.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS place-content Property</title>
<style>
h1 {
color: green;
}
#container {
display: flex;
height: 100px;
width: 460px;
flex-wrap: wrap;
background-color: gray;
/* place-content can be changed
in the live sample */
place-content: flex-start start;
}
div > div {
border: 2px solid black;
width: 60px;
background-color: green;
color: white;
}
.short {
font-size: 12px;
height: 30px;
}
.tall {
font-size: 14px;
height: 40px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b>CSS place-content Property</b>
<div id="container">
<div class="short">Geeks</div>
<div class="short">
Computer<br />
Science
</div>
<div class="tall">
Geeks<br />
for
</div>
<div class="tall">
Portal<br />
for
</div>
<div class="tall"></div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 3: aquí usaremos el valor de la propiedad place-content: flex-end end .
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS place-content Property</title>
<style>
h1 {
color: green;
}
#container {
display: flex;
height: 100px;
width: 460px;
flex-wrap: wrap;
background-color: gray;
/* place-content can be
changed in the live sample */
place-content: flex-end end;
}
div > div {
border: 2px solid black;
width: 60px;
background-color: green;
color: white;
}
.short {
font-size: 12px;
height: 30px;
}
.tall {
font-size: 14px;
height: 40px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b>CSS place-content Property</b>
<div id="container">
<div class="short">Geeks</div>
<div class="short">
Computer<br />
Science
</div>
<div class="tall">
Geeks<br />
for
</div>
<div class="tall">
Portal<br />
for
</div>
<div class="tall"></div>
</div>
</center>
</body>
</html>
Producción:
Navegadores compatibles:
- Firefox (mejor soporte)
- Cromo
- Safari
- Ópera
- Borde
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA