EN
CSS - specify flex items direction
0 points
In this article, we would like to show you how to specify flex items direction in CSS.
Quick solution:
xxxxxxxxxx1
.container {2
display: flex;3
flex-direction: row-reverse;4
}
In this example, we define the direction flex items are placed along the main axis in the flex container using flexbox flex-direction property.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.container {7
background-color: #3085d6;8
height: 200px;9
width: 200px;10
border-radius: 10px;11
box-shadow: 5px 5px 15px gray;12
align-items: center;13
justify-content: center;14
flex-wrap: wrap;15
16
display: flex; /* <----- required */17
flex-direction: row; /* <----- required */18
}19
20
.item {21
height: 50px;22
width: 50px;23
margin: 2px;24
background-color: rgb(255, 195, 83);25
box-shadow: 1px 1px 2px black;26
border: 1px solid black;27
border-radius: 5px;28
text-align: center;29
line-height: 50px;30
}31
32
</style>33
</head>34
<body>35
<div class="container">36
<div class="item">0</div>37
<div class="item">1</div>38
<div class="item">2</div>39
<div class="item">3</div>40
<div class="item">4</div>41
<div class="item">5</div>42
<div class="item">6</div>43
<div class="item">7</div>44
<div class="item">8</div>45
</div>46
</body>47
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.container {7
background-color: #3085d6;8
height: 200px;9
width: 200px;10
border-radius: 10px;11
box-shadow: 5px 5px 15px gray;12
align-items: center;13
justify-content: center;14
flex-wrap: wrap;15
16
display: flex; /* <----- required */17
flex-direction: column; /* <----- required */18
}19
20
.item {21
height: 50px;22
width: 50px;23
margin: 2px;24
background-color: rgb(255, 195, 83);25
box-shadow: 1px 1px 2px black;26
border: 1px solid black;27
border-radius: 5px;28
text-align: center;29
line-height: 50px;30
}31
32
</style>33
</head>34
<body>35
<div class="container">36
<div class="item">0</div>37
<div class="item">1</div>38
<div class="item">2</div>39
<div class="item">3</div>40
<div class="item">4</div>41
<div class="item">5</div>42
<div class="item">6</div>43
<div class="item">7</div>44
<div class="item">8</div>45
</div>46
</body>47
</html>