Flexbox: justificación del contenido
A menudo, puede observar un espacio adicional que queda en el contenedor después de organizar los elementos flexibles como se muestra a continuación.
Usando la propiedad justify-content, puede alinear el contenido a lo largo del eje principal distribuyendo el espacio adicional según lo previsto. También puede ajustar la alineación de los elementos flexibles, en caso de que desborden la línea.
usage -
justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;Esta propiedad acepta los siguientes valores:
flex-start - Los elementos flexibles se colocan al inicio del contenedor.
flex-end - Los artículos flexibles se colocan al final del contenedor.
center - Los elementos flexibles se colocan en el centro del contenedor, donde el espacio extra se distribuye por igual al inicio y al final de los elementos flexibles.
space-between - El espacio extra se distribuye por igual entre los elementos flexibles.
space-around - El espacio extra se distribuye equitativamente entre los elementos flexibles de modo que el espacio entre los bordes del contenedor y su contenido sea la mitad del espacio entre los elementos flexibles.
Ahora, veremos cómo usar la propiedad justify-content, con ejemplos.
inicio flexible
Al pasar este valor a la propiedad justify-content, los elementos flexibles se colocan al comienzo del contenedor.
El siguiente ejemplo demuestra el resultado de pasar el valor flex-start al justify-content propiedad.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:flex-start;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>Producirá el siguiente resultado:
extremo flexible
Al pasar este valor a la propiedad justify-content, los elementos flexibles se colocan al final del contenedor.
El siguiente ejemplo demuestra el resultado de pasar el valor flex-end al justify-content propiedad.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:flex-end;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>Producirá el siguiente resultado:
centrar
Al pasar este valor a la propiedad justify-content, los elementos flexibles se colocan en el centro del contenedor, donde el espacio extra se distribuye por igual al inicio y al final de los elementos flexibles.
El siguiente ejemplo demuestra el resultado de pasar el valor center al justify-content propiedad.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:center;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>Producirá el siguiente resultado:
espacio entre
Al pasar este valor a la propiedad justify-content, el espacio extra se distribuye por igual entre los elementos flexibles de modo que el espacio entre dos elementos flexibles sea el mismo y el inicio y el final de los elementos flexibles toquen los bordes del contenedor.
El siguiente ejemplo demuestra el resultado de pasar el valor space-between al justify-content propiedad.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:space-between;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>Producirá el siguiente resultado:
espacio alrededor
Al pasar este valor a la propiedad justify-content, el espacio extra se distribuye equitativamente entre los elementos flexibles de modo que el espacio entre dos elementos flexibles sea el mismo. Sin embargo, el espacio entre los bordes del contenedor y su contenido (el inicio y el final de los elementos flexibles) es la mitad del espacio entre los elementos flexibles.
El siguiente ejemplo demuestra el resultado de pasar el valor space-around al justify-content propiedad.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:space-around;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>Producirá el siguiente resultado:
espacio uniforme
Al pasar este valor a la propiedad justify-content, el espacio extra se distribuye equitativamente entre los elementos flexibles de modo que el espacio entre dos elementos flexibles sea el mismo (incluido el espacio hasta los bordes).
El siguiente ejemplo demuestra el resultado de pasar el valor space-evenly al justify-content propiedad.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
}
.container{
display:flex;
border:3px solid black;
justify-content:space-evenly;
}
</style>
<body>
<div class = "container">
<div class = "box box1">One</div>
<div class = "box box2">two</div>
<div class = "box box3">three</div>
<div class = "box box4">four</div>
<div class = "box box5">five</div>
<div class = "box box6">six</div>
</div>
</body>
</html>Producirá el siguiente resultado: