EN
CSS - enable flex items wrapping using flexbox
0 points
In this article, we would like to show you flex-wrap property example in CSS.
Quick solution:
xxxxxxxxxx1
.container {2
display: flex;3
flex-wrap: wrap-reverse;4
}Screenshot:
In this example, we use flex-wrap property to make flex items wrap inside the container.
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
15
display: flex; /* <----- required */16
flex-wrap: wrap; /* <----- required */17
}18
19
.item {20
height: 50px;21
width: 50px;22
margin: 2px;23
background-color: rgb(255, 195, 83);24
box-shadow: 1px 1px 2px black;25
border: 1px solid black;26
border-radius: 5px;27
text-align: center;28
line-height: 50px;29
}30
31
</style>32
</head>33
<body>34
<div class="container">35
<div class="item">1</div>36
<div class="item">2</div>37
<div class="item">3</div>38
<div class="item">4</div>39
<div class="item">5</div>40
<div class="item">6</div>41
<div class="item">7</div>42
<div class="item">8</div>43
<div class="item">9</div>44
</div>45
</body>46
</html>