Flex Direction
The flex-direction property enables us to determine the direction in which flex items are arranged. By default, this property is set to row, resulting in a left-to-right layout in browsers that use English as the default language. You can set it to:
cssflex-direction: row | column | row-reverse | column-reverse;
Let's consider the next website navigation as an example.
row
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="navigation-list">
<li class="navigation-item">
<a href="#" class="navigation-link">Home</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">About</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Price</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Team</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Support</a>
</li>
</ul>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.navigation-list {
background-color: honeydew;
display: flex;
padding: 10px;
}
.navigation-item {
padding: 10px;
border-radius: 6px;
background-color: violet;
}
.navigation-item:not(:last-child) {
margin-right: 20px;
}
.navigation-link {
color: wheat;
}
/* Remove default decoration */
ul {
list-style: none;
}
a {
text-decoration: none;
}
row-reverse
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="navigation-list">
<li class="navigation-item">
<a href="#" class="navigation-link">Home</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">About</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Price</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Team</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Support</a>
</li>
</ul>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.navigation-list {
background-color: honeydew;
display: flex;
flex-direction: row-reverse;
padding: 10px;
}
.navigation-item {
padding: 10px;
border-radius: 6px;
background-color: violet;
}
.navigation-item:not(:last-child) {
margin-left: 20px;
}
.navigation-link {
color: wheat;
}
/* Remove default decoration */
ul {
list-style: none;
}
a {
text-decoration: none;
}
column
Pay attention to the width of the items; they cover the entire width of the parent.
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="navigation-list">
<li class="navigation-item">
<a href="#" class="navigation-link">Home</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">About</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Price</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Team</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Support</a>
</li>
</ul>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.navigation-list {
background-color: honeydew;
display: flex;
flex-direction: column;
padding: 10px;
}
.navigation-item {
padding: 10px;
border-radius: 6px;
background-color: violet;
}
.navigation-item:not(:last-child) {
margin-bottom: 20px;
}
.navigation-link {
color: wheat;
}
/* Remove default decoration */
ul {
list-style: none;
}
a {
text-decoration: none;
}
column-reverse
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="navigation-list">
<li class="navigation-item">
<a href="#" class="navigation-link">Home</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">About</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Price</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Team</a>
</li>
<li class="navigation-item">
<a href="#" class="navigation-link">Support</a>
</li>
</ul>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.navigation-list {
background-color: honeydew;
display: flex;
flex-direction: column-reverse;
padding: 10px;
}
.navigation-item {
padding: 10px;
border-radius: 6px;
background-color: violet;
}
.navigation-item:not(:last-child) {
margin-top: 20px;
}
.navigation-link {
color: wheat;
}
/* Remove default decoration */
ul {
list-style: none;
}
a {
text-decoration: none;
}
Video Player is loading.
Loaded: 0%
Current Time 0:00
/
Duration -:-
- , opens subtitles settings dialogsubtitles settings
- subtitles off
- , selectedEnglish Captions
1x
- 2x
- 1.5x
- , selected1x
- 0.5x
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Beginning of dialog window. Escape will cancel and close the window.
End of dialog window.
Alt var klart?
Takk for tilbakemeldingene dine!
Seksjon 4. Kapittel 2
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
