Wartość row jest domyślną wartością właściwości flex-direction.
Domyślnie elementy dzieci elementu HTML tworzącego układ elastyczny posiadają wierszowy kierunek układania się.
Cechy wartości row właściwości flex-direction
-
układanie elementów dzieci elementu HTML tworzącego układ elastyczny rozpoczyna się od początkowej krawędzi liniowej elementu rodzica
-
elementy dzieci elementu HTML tworzącego układ elastyczny przylegają do początkowej krawędzi blokowej elementu rodzica
-
osią główną elementu HTML tworzącego układ elastyczny staje się oś wierszowa, która ma swój początek przy początkowej krawędzi liniowej elementu HTML, a koniec przy końcowej krawędzi liniowej elementu HTML
-
osią poprzeczną elementu HTML tworzącego układ elastyczny staje się oś kolumnowa, która ma swój początek przy początkowej krawędzi blokowej elementu HTML, a koniec przy końcowej krawędzi blokowej elementu HTML
-
elementy dzieci elementu HTML tworzącego układ elastyczny układają się jeden po drugim wzdłuż osi głównej wewnątrz jednego niewidocznego anonimowego bloku posiadającego wyłącznie jeden wiersz na swoją treść
flex-direction:row;
Elementy dzieci przykładowego elementu "div#flexbox" posiadają wierszowy kierunek układania się.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#flexbox {
display:flex;
height:250px;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
#flexbox > div {
padding:0.5em;
}
#flexbox > :nth-child(1) {
background-color:red;
}
#flexbox > :nth-child(2) {
background-color:orange;
}
#flexbox > :nth-child(3) {
background-color:yellow;
}
</style>
</head>
<body>
<div id="flexbox">
<div>div - 1</div>
<div>div - 2</div>
<div>div - 3</div>
</div>
</body>
</html>
Za pomocą wartości row-reverse właściwości flex-direction możemy sprawić, że elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny będą posiadały odwrócony wierszowy kierunek układania się.
Cechy wartości row-reverse właściwości flex-direction
-
układanie elementów dzieci elementu HTML tworzącego układ elastyczny rozpoczyna się od końcowej krawędzi liniowej elementu rodzica
-
elementy dzieci elementu HTML tworzącego układ elastyczny przylegają do początkowej krawędzi blokowej elementu rodzica
-
osią główną elementu HTML tworzącego układ elastyczny staje się oś wierszowa, która ma swój początek przy końcowej krawędzi liniowej elementu HTML, a koniec przy początkowej krawędzi liniowej elementu HTML
-
osią poprzeczną elementu HTML tworzącego układ elastyczny staje się oś kolumnowa, która ma swój początek przy początkowej krawędzi blokowej elementu HTML, a koniec przy końcowej krawędzi blokowej elementu HTML
-
elementy dzieci elementu HTML tworzącego układ elastyczny układają się jeden po drugim wzdłuż osi głównej wewnątrz jednego niewidocznego anonimowego bloku posiadającego wyłącznie jeden wiersz na swoją treść
flex-direction:row-reverse;
Elementy dzieci przykładowego elementu "div#flexbox" posiadają odwrócony wierszowy kierunek układania się, ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "flex-direction" wraz z wartością "row-reverse".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#flexbox {
display:flex;
flex-direction:row-reverse;
height:250px;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
#flexbox > div {
padding:0.5em;
}
#flexbox > :nth-child(1) {
background-color:red;
}
#flexbox > :nth-child(2) {
background-color:orange;
}
#flexbox > :nth-child(3) {
background-color:yellow;
}
</style>
</head>
<body>
<div id="flexbox">
<div>div - 1</div>
<div>div - 2</div>
<div>div - 3</div>
</div>
</body>
</html>
Za pomocą wartości column właściwości flex-direction możemy sprawić, że elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny będą posiadały kolumnowy kierunek układania się.
Cechy wartości column właściwości flex-direction
-
układanie elementów dzieci elementu HTML tworzącego układ elastyczny rozpoczyna się od początkowej krawędzi blokowej elementu rodzica
-
elementy dzieci elementu HTML tworzącego układ elastyczny przylegają do początkowej krawędzi liniowej elementu rodzica
-
osią główną elementu HTML tworzącego układ elastyczny staje się oś kolumnowa, która ma swój początek przy początkowej krawędzi blokowej elementu HTML, a koniec przy końcowej krawędzi blokowej elementu HTML
-
osią poprzeczną elementu HTML tworzącego układ elastyczny staje się oś wierszowa, która ma swój początek przy początkowej krawędzi liniowej elementu HTML, a koniec przy końcowej krawędzi liniowej elementu HTML
-
elementy dzieci elementu HTML tworzącego układ elastyczny układają się jeden po drugim wzdłuż osi głównej wewnątrz jednego niewidocznego anonimowego bloku posiadającego wyłącznie jedną kolumnę na swoją treść
flex-direction:column;
Elementy dzieci przykładowego elementu "div#flexbox" posiadają kolumnowy kierunek układania się, ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "flex-direction" wraz z wartością "column".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#flexbox {
display:flex;
flex-direction:column;
height:250px;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
#flexbox > div {
padding:0.5em;
}
#flexbox > :nth-child(1) {
background-color:red;
}
#flexbox > :nth-child(2) {
background-color:orange;
}
#flexbox > :nth-child(3) {
background-color:yellow;
}
</style>
</head>
<body>
<div id="flexbox">
<div>div - 1</div>
<div>div - 2</div>
<div>div - 3</div>
</div>
</body>
</html>
Za pomocą wartości column-reverse właściwości flex-direction możemy sprawić, że elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny będą posiadały odwrócony kolumnowy kierunek układania się.
Cechy wartości column-reverse właściwości flex-direction
-
układanie elementów dzieci elementu HTML tworzącego układ elastyczny rozpoczyna się od końcowej krawędzi blokowej elementu rodzica
-
elementy dzieci elementu HTML tworzącego układ elastyczny przylegają do początkowej krawędzi liniowej elementu rodzica
-
osią główną elementu HTML tworzącego układ elastyczny staje się oś kolumnowa, która ma swój początek przy końcowej krawędzi blokowej elementu HTML, a koniec przy początkowej krawędzi blokowej elementu HTML
-
osią poprzeczną elementu HTML tworzącego układ elastyczny staje się oś wierszowa, która ma swój początek przy początkowej krawędzi liniowej elementu HTML, a koniec przy końcowej krawędzi liniowej elementu HTML
-
elementy dzieci elementu HTML tworzącego układ elastyczny układają się jeden po drugim wzdłuż osi głównej wewnątrz jednego niewidocznego anonimowego bloku posiadającego wyłącznie jedną kolumnę na swoją treść
flex-direction:column-reverse;
Elementy dzieci przykładowego elementu "div#flexbox" posiadają odwrócony kolumnowy kierunek układania się, ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "flex-direction" wraz z wartością "column-reverse".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#flexbox {
display:flex;
flex-direction:column-reverse;
height:250px;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
#flexbox > div {
padding:0.5em;
}
#flexbox > :nth-child(1) {
background-color:red;
}
#flexbox > :nth-child(2) {
background-color:orange;
}
#flexbox > :nth-child(3) {
background-color:yellow;
}
</style>
</head>
<body>
<div id="flexbox">
<div>div - 1</div>
<div>div - 2</div>
<div>div - 3</div>
</div>
</body>
</html>
