Flexbox - Begründung des Inhalts
Oft können Sie einen zusätzlichen Platz im Container beobachten, nachdem Sie die Flex-Elemente wie unten gezeigt angeordnet haben.
Verwenden der Eigenschaft justify-contentkönnen Sie den Inhalt entlang der Hauptachse ausrichten, indem Sie den zusätzlichen Platz wie vorgesehen verteilen. Sie können auch die Ausrichtung der Flexitems anpassen, falls diese über die Linie laufen.
usage - -
justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;Diese Eigenschaft akzeptiert die folgenden Werte:
flex-start - Die Flex-Items befinden sich am Anfang des Containers.
flex-end - Die Flex-Items befinden sich am Ende des Containers.
center - Die Flex-Items befinden sich in der Mitte des Containers, wo der zusätzliche Platz zu Beginn und am Ende der Flex-Items gleichmäßig verteilt ist.
space-between - Der zusätzliche Platz wird gleichmäßig auf die Flex-Items verteilt.
space-around - Der zusätzliche Raum wird gleichmäßig auf die Flex-Elemente verteilt, sodass der Abstand zwischen den Rändern des Behälters und seinem Inhalt halb so groß ist wie der Abstand zwischen den Flex-Elementen.
Nun werden wir anhand von Beispielen sehen, wie die Eigenschaft "Inhalt rechtfertigen" verwendet wird.
Flex-Start
Bei Übergabe dieses Wertes an die Eigenschaft justify-contentwerden die Flex-Items am Anfang des Containers platziert.
Das folgende Beispiel zeigt das Ergebnis der Übergabe des Werts flex-start zum justify-content Eigentum.
<!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>Es wird das folgende Ergebnis erzeugt -
Flex-End
Bei Übergabe dieses Wertes an die Eigenschaft justify-contentwerden die flex-artikel am ende des behälters platziert.
Das folgende Beispiel zeigt das Ergebnis der Übergabe des Werts flex-end zum justify-content Eigentum.
<!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>Es wird das folgende Ergebnis erzeugt -
Center
Bei Übergabe dieses Wertes an die Eigenschaft justify-contentDie Flex-Items befinden sich in der Mitte des Containers, wo der zusätzliche Platz zu Beginn und am Ende der Flex-Items gleichmäßig verteilt ist.
Das folgende Beispiel zeigt das Ergebnis der Übergabe des Werts center zum justify-content Eigentum.
<!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>Es wird das folgende Ergebnis erzeugt -
Zwischenraum
Bei Übergabe dieses Wertes an die Eigenschaft justify-contentwird der zusätzliche Raum gleichmäßig zwischen den Flex-Elementen verteilt, so dass der Abstand zwischen zwei beliebigen Flex-Elementen gleich ist und der Anfang und das Ende der Flex-Elemente die Ränder des Behälters berühren.
Das folgende Beispiel zeigt das Ergebnis der Übergabe des Werts space-between zum justify-content Eigentum.
<!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>Es wird das folgende Ergebnis erzeugt -
Raum um
Bei Übergabe dieses Wertes an die Eigenschaft justify-contentwird der zusätzliche Raum gleichmäßig zwischen den Flex-Elementen verteilt, so dass der Abstand zwischen zwei beliebigen Flex-Elementen gleich ist. Der Abstand zwischen den Kanten des Behälters und seinem Inhalt (Anfang und Ende der Flex-Elemente) ist jedoch halb so groß wie der Abstand zwischen den Flex-Elementen.
Das folgende Beispiel zeigt das Ergebnis der Übergabe des Werts space-around zum justify-content Eigentum.
<!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>Es wird das folgende Ergebnis erzeugt -
platzgleichmäßig
Bei Übergabe dieses Wertes an die Eigenschaft justify-contentwird der zusätzliche Raum gleichmäßig auf die Flex-Elemente verteilt, so dass der Abstand zwischen zwei beliebigen Flex-Elementen gleich ist (einschließlich des Abstands zu den Kanten).
Das folgende Beispiel zeigt das Ergebnis der Übergabe des Werts space-evenly zum justify-content Eigentum.
<!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>Es wird das folgende Ergebnis erzeugt -