Flexbox - Justifier le contenu
Vous pouvez souvent observer un espace supplémentaire dans le conteneur après avoir disposé les éléments flexibles comme indiqué ci-dessous.
Utilisation de la propriété justify-content, vous pouvez aligner le contenu le long de l'axe principal en répartissant l'espace supplémentaire comme prévu. Vous pouvez également ajuster l'alignement des flexitems, au cas où ils dépasseraient la ligne.
usage -
justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;Cette propriété accepte les valeurs suivantes -
flex-start - Les flex-items sont placés au début du conteneur.
flex-end - Les flex-items sont placés à l'extrémité du conteneur.
center - Les flex-items sont placés au centre du conteneur, où l'espace supplémentaire est également réparti au début et à la fin des flex-items.
space-between - L'espace supplémentaire est également réparti entre les éléments flexibles.
space-around - L'espace supplémentaire est également réparti entre les éléments flexibles de sorte que l'espace entre les bords du conteneur et son contenu est égal à la moitié de l'espace entre les éléments flexibles.
Maintenant, nous allons voir comment utiliser la propriété justify-content, avec des exemples.
flex-start
En passant cette valeur à la propriété justify-content, les flex-items sont placés au début du conteneur.
L'exemple suivant montre le résultat de la transmission de la valeur flex-start à la justify-content propriété.
<!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>Il produira le résultat suivant -
extrémité flexible
En passant cette valeur à la propriété justify-content, les flex-items sont placés à l'extrémité du conteneur.
L'exemple suivant montre le résultat de la transmission de la valeur flex-end à la justify-content propriété.
<!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>Il produira le résultat suivant -
centre
En passant cette valeur à la propriété justify-content, les flex-items sont placés au centre du conteneur, où l'espace supplémentaire est également réparti au début et à la fin des flex-items.
L'exemple suivant montre le résultat de la transmission de la valeur center à la justify-content propriété.
<!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>Il produira le résultat suivant -
l'espace entre
En passant cette valeur à la propriété justify-content, l'espace supplémentaire est également réparti entre les éléments flexibles de sorte que l'espace entre deux éléments flexibles soit le même et que le début et la fin des éléments flexibles touchent les bords du conteneur.
L'exemple suivant montre le résultat de la transmission de la valeur space-between à la justify-content propriété.
<!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>Il produira le résultat suivant -
espace autour
En passant cette valeur à la propriété justify-content, l'espace supplémentaire est également réparti entre les éléments flexibles de sorte que l'espace entre deux éléments flexibles est le même. Cependant, l'espace entre les bords du conteneur et son contenu (le début et la fin des éléments flexibles) est la moitié de l'espace entre les éléments flexibles.
L'exemple suivant montre le résultat de la transmission de la valeur space-around à la justify-content propriété.
<!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>Il produira le résultat suivant -
espace-uniformément
En passant cette valeur à la propriété justify-content, l'espace supplémentaire est également réparti entre les éléments flexibles de sorte que l'espace entre deux éléments flexibles soit le même (y compris l'espace sur les bords).
L'exemple suivant montre le résultat de la transmission de la valeur space-evenly à la justify-content propriété.
<!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>Il produira le résultat suivant -