En este artículo, aprenderemos cómo establecer el valor predeterminado para alinear el contenido con su valor predeterminado en CSS. La propiedad align-content se usa para alinear el contenido dentro de un contenedor específico.
Enfoque: el valor normal de la propiedad align-content se usa para establecer el valor predeterminado en CSS. Establece su valor predeterminado en initial , que se estira para la propiedad align-content de acuerdo con la especificación de flexbox.
valores de propiedad de alineación de contenido:
- centro: Las líneas se colocan en el centro del contenedor flexible.
- estirar: La línea estirada para ocupar el espacio restante del contenedor flexible. Es el valor predeterminado.
- flex-start: muestra las líneas al comienzo del contenedor flexible.
- flex-end: muestra las líneas flexibles al final del contenedor flexible
- space-around: al usar la propiedad space-around, el espacio se distribuirá equitativamente alrededor de las líneas flexibles.
- espacio entre: muestra las líneas flexibles con el mismo espacio entre ellas.
El siguiente ejemplo demuestra el enfoque anterior.
Ejemplo: si el valor predeterminado de la propiedad align-content se establece en el valor normal .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 36vw;
height: 50vh;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
background-color: darkgreen;
/*default value*/
align-content: normal;
}
#item1,
#item2,
#item3,
#item4 {
box-sizing: border-box;
min-height: 20%;
width: 22%;
border: 1.5px dashed red;
margin: 0.5vw;
display: flex;
align-items: center;
justify-content: center;
}
#item1 {
background-color: lightsalmon;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: pink;
}
#item4 {
background-color: cyan;
}
</style>
</head>
<body>
<div class="box">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
</div>
</body>
</html>
Salida: los cuatro elementos dentro del cuadro están alineados con el valor normal , que se estira en el cuadro flexible de CSS.
Publicación traducida automáticamente
Artículo escrito por nikhil16175 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA