- Autor publikacji
- Virtual Patriot - Administrator
justify-content
- Data publikacji
- Ostatnio edytowano
Przeznaczenie właściwości justify-content
Za pomocą właściwości justify-content
możemy określić sposób wyrównania kolumn budujących siatkę interesującego nas elementu HTML tworzącego układ siatki. Wspomniane wyrównywanie kolumn budujących siatkę dokonuje się wzdłuż osi liniowej elementu HTML tworzącego układ siatki oraz w obszarze zawartości elementu HTML tworzącego układ siatki.
- Informacje dodatkowe
-
brak
Informacje techniczne o właściwości justify-content
- przeznaczenie
-
-
element HTML typu grid
-
element HTML typu inline-grid
-
- pozycja
-
dowolna
- dziedziczenie
-
nie
- wartość initial
- wyjątki initial
-
brak
- animowanie
-
tak (animacja schodkowa)
Interpretacja właściwości justify-content
-
tak
-
tak
-
tak
-
tak
-
nie
-
tak
Opis wartości właściwości justify-content
normal
Wyjaśnienie
Wartość normal
jest domyślną wartością właściwości justify-content
.
Wartość normal
właściwości justify-content
elementu HTML typu grid lub inline-grid działa na takiej samej zasadzie jak wartość stretch.
Przykład
justify-content:normal;
Ze względu na to, iż przykładowy element "div#gridbox" jest typu "grid" wartość domyślna właściwości "justify-content" przykładowego elementu "div#gridbox" działa na takiej samej zasadzie jak wartość "stretch", a co za tym idzie rozmiar szerokości kolumn budujących siatkę przykładowego elementu "div#gridbox" został równomiernie rozciągnięty wzdłuż osi liniowej przykładowego elementu "div#gridbox".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(4, 65px);
font-size:1.3em;
background-color:#7DCDE8;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:2;
grid-row-end:4;
grid-column-start:2;
grid-column-end:4;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:3;
grid-row-end:5;
grid-column-start:3;
grid-column-end:5;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
start
Wyjaśnienie
Za pomocą wartości start
właściwości justify-content
możemy sprawić, że kolumny budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane wzdłuż osi liniowej, w kierunku początku tejże osi liniowej.
Przykład
justify-content:start;
Kolumny budujące siatkę przykładowego elementu "div#gridbox" zostały wyrównane wzdłuż osi liniowej przykładowego elementu "div#gridbox", w kierunku początku osi liniowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-content" wraz z wartością "start".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(4, 65px);
grid-template-columns:repeat(4, 65px);
justify-content:start;
font-size:1.3em;
background-color:#7DCDE8;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:2;
grid-row-end:4;
grid-column-start:2;
grid-column-end:4;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:3;
grid-row-end:5;
grid-column-start:3;
grid-column-end:5;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
end
Wyjaśnienie
Za pomocą wartości end
właściwości justify-content
możemy sprawić, że kolumny budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane wzdłuż osi liniowej, w kierunku końca tejże osi liniowej.
Przykład
justify-content:end;
Kolumny budujące siatkę przykładowego elementu "div#gridbox" zostały wyrównane wzdłuż osi liniowej przykładowego elementu "div#gridbox", w kierunku końca osi liniowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-content" wraz z wartością "end".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(4, 65px);
grid-template-columns:repeat(4, 65px);
justify-content:end;
font-size:1.3em;
background-color:#7DCDE8;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:2;
grid-row-end:4;
grid-column-start:2;
grid-column-end:4;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:3;
grid-row-end:5;
grid-column-start:3;
grid-column-end:5;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
center
Wyjaśnienie
Za pomocą wartości center
właściwości justify-content
możemy sprawić, że kolumny budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyśrodkowane względem początku oraz końca osi liniowej.
Przykład
justify-content:center;
Kolumny budujące siatkę przykładowego elementu "div#gridbox" zostały wyśrodkowane względem początku oraz końca osi liniowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "align-content" wraz z wartością "center".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(4, 65px);
grid-template-columns:repeat(4, 65px);
justify-content:center;
font-size:1.3em;
background-color:#7DCDE8;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:2;
grid-row-end:4;
grid-column-start:2;
grid-column-end:4;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:3;
grid-row-end:5;
grid-column-start:3;
grid-column-end:5;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
left
Wyjaśnienie
Za pomocą wartości left
właściwości justify-content
możemy sprawić, że kolumny budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane na lewo wzdłuż osi liniowej.
Przykład
justify-content:left;
Kolumny budujące siatkę przykładowego elementu "div#gridbox" zostały wyrównane na lewo wzdłuż osi liniowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-content" wraz z wartością "left".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(4, 65px);
grid-template-columns:repeat(4, 65px);
justify-content:left;
font-size:1.3em;
background-color:#7DCDE8;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:2;
grid-row-end:4;
grid-column-start:2;
grid-column-end:4;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:3;
grid-row-end:5;
grid-column-start:3;
grid-column-end:5;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
right
Wyjaśnienie
Za pomocą wartości right
właściwości justify-content
możemy sprawić, że kolumny budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane na prawo wzdłuż osi liniowej.
Przykład
justify-content:right;
Kolumny budujące siatkę przykładowego elementu "div#gridbox" zostały wyrównane na prawo wzdłuż osi liniowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-content" wraz z wartością "right".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(4, 65px);
grid-template-columns:repeat(4, 65px);
justify-content:right;
font-size:1.3em;
background-color:#7DCDE8;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:2;
grid-row-end:4;
grid-column-start:2;
grid-column-end:4;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:3;
grid-row-end:5;
grid-column-start:3;
grid-column-end:5;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
space-between
Wyjaśnienie
Za pomocą wartości space-between
właściwości justify-content
możemy sprawić, że kolumny budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane w stylu space-between
. Styl space-between
oznacza, że jeżeli wzdłuż osi liniowej elementu HTML tworzącego układ siatki pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi kolumnami.
Gdy element HTML tworzący układ siatki posiada tylko jedną kolumnę, wtedy wartość "space-between" działa na takiej samej zasadzie jak wartość start.
Przykład
justify-content:space-between;
Kolumny budujące siatkę przykładowego elementu "div#gridbox" zostały rozłożone wzdłuż osi liniowej przykładowego elementu "div#gridbox", pomiędzy początkiem oraz końcem osi liniowej przykładowego elementu "div#gridbox", w stylu "space-between", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-content" wraz z wartością "space-between".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(4, 65px);
grid-template-columns:repeat(4, 65px);
justify-content:space-between;
font-size:1.3em;
background-color:#7DCDE8;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:2;
grid-row-end:4;
grid-column-start:2;
grid-column-end:4;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:3;
grid-row-end:5;
grid-column-start:3;
grid-column-end:5;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
space-around
Wyjaśnienie
Za pomocą wartości space-around
właściwości justify-content
możemy sprawić, że kolumny budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane w stylu space-around
. Styl space-around
oznacza, że jeżeli wzdłuż osi liniowej elementu HTML tworzącego układ siatki pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi kolumnami, dodatkowo rozmiar połowy jednej części podzielonego rozmiaru wolnej przestrzeni zostanie umieszczony przed pierwszą kolumną oraz po ostatniej kolumnie.
Gdy element HTML tworzący układ siatki posiada tylko jedną kolumnę, wtedy wartość "space-around" działa na takiej samej zasadzie jak wartość center.
Przykład
justify-content:space-around;
Kolumny budujące siatkę przykładowego elementu "div#gridbox" zostały rozłożone wzdłuż osi liniowej przykładowego elementu "div#gridbox", pomiędzy początkiem oraz końcem osi liniowej przykładowego elementu "div#gridbox", w stylu "space-around", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-content" wraz z wartością "space-around".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(4, 65px);
grid-template-columns:repeat(4, 65px);
justify-content:space-around;
font-size:1.3em;
background-color:#7DCDE8;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:2;
grid-row-end:4;
grid-column-start:2;
grid-column-end:4;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:3;
grid-row-end:5;
grid-column-start:3;
grid-column-end:5;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
space-evenly
Wyjaśnienie
Za pomocą wartości space-evenly
właściwości justify-content
możemy sprawić, że kolumny budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane w stylu space-evenly
. Styl space-evenly
oznacza, że jeżeli wzdłuż osi liniowej elementu HTML tworzącego układ siatki pozostała wolna przestrzeń, wtedy rozmiar tej wolnej przestrzeni zostanie równomiernie podzielony oraz rozłożony pomiędzy wszystkimi kolumnami, dodatkowo rozmiar jednej części podzielonego rozmiaru wolnej przestrzeni zostanie umieszczony przed pierwszą kolumną oraz po ostatniej kolumnie.
Gdy element HTML tworzący układ siatki posiada tylko jedną kolumnę, wtedy wartość "space-evenly" działa na takiej samej zasadzie jak wartość center.
Przykład
justify-content:space-evenly;
Kolumny budujące siatkę przykładowego elementu "div#gridbox" zostały rozłożone wzdłuż osi liniowej przykładowego elementu "div#gridbox", pomiędzy początkiem oraz końcem osi liniowej przykładowego elementu "div#gridbox", w stylu "space-evenly", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-content" wraz z wartością "space-evenly".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(4, 65px);
grid-template-columns:repeat(4, 65px);
justify-content:space-evenly;
font-size:1.3em;
background-color:#7DCDE8;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:2;
grid-row-end:4;
grid-column-start:2;
grid-column-end:4;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:3;
grid-row-end:5;
grid-column-start:3;
grid-column-end:5;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
stretch
Wyjaśnienie
Za pomocą wartości stretch
właściwości justify-content
możemy sprawić, że kolumny budujące siatkę interesującego nas elementu HTML tworzącego układ siatki zostaną wyrównane w stylu stretch
. Styl stretch
oznacza, że jeżeli wzdłuż osi liniowej elementu HTML tworzącego układ siatki pozostała wolna przestrzeń, wtedy na podstawie rozmiaru tej wolnej przestrzeni zostanie dokonane równomierne rozciągnięcie znajdującego się na wspomnianej osi liniowej rozmiaru kolumn.
Tylko kolumny posiadające automatyczny rozmiar mogą zostać rozciągnięte. Dla kolumn nieposiadających automatycznego rozmiaru wartość "stretch" działa na takiej samej zasadzie jak wartość start.
Przykład
justify-content:stretch;
Rozmiar szerokości kolumn budujących siatkę przykładowego elementu "div#gridbox" został równomiernie rozciągnięty wzdłuż osi liniowej przykładowego elementu "div#gridbox", ponieważ do wspomnianego elementu "div#gridbox" została dodana właściwość "justify-content" wraz z wartością "stretch".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#gridbox {
display:grid;
grid-template-rows:repeat(4, 65px);
justify-content:stretch;
font-size:1.3em;
background-color:#7DCDE8;
}
#gridbox > :nth-child(1) {
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
background-color:red;
}
#gridbox > :nth-child(2) {
grid-row-start:2;
grid-row-end:4;
grid-column-start:2;
grid-column-end:4;
background-color:orange;
}
#gridbox > :nth-child(3) {
grid-row-start:3;
grid-row-end:5;
grid-column-start:3;
grid-column-end:5;
background-color:yellow;
}
</style>
</head>
<body>
<div id="gridbox">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>