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
<!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>
.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
<!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>
.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
<!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>
.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
<!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>
.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;
}
Var alt klart?
Tak for dine kommentarer!
Sektion 4. Kapitel 2
