The height of the flex container is 550px, I have total 10 flex items. Height and width of each flex item is 70px.
Here is the full html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox</title>
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
width: 40vw;
margin: 1rem auto;
}
.container {
width: 100%;
border: 2px solid red;
padding: 1rem;
}
.item {
border: 2px solid green;
padding: 1rem;
margin-right: 1rem;
margin-bottom: 1rem;
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<div id="helloFlex">
<div class="container" style="display: flex;flex-wrap: wrap;height: 550px;"> <div class="item">
<span>1</span>
</div>
<div class="item">
<span>2</span>
</div>
<div class="item">
<span>3</span>
</div>
<div class="item">
<span>4</span>
</div>
<div class="item"><span>5</span></div>
<div class="item"><span>6</span></div>
<div class="item"><span>7</span></div>
<div class="item"><span>8</span></div>
<div class="item"><span>9</span></div>
<div class="item"><span>10</span></div>
</div>
</div>
</body>
</html>
Here is how it looks like
Flex container is in red border and flex items are in green border.
My question is why there is so much extra space after flex item 5 ??
If I remove the height:550px from container div, then it looks normal. Like this
>Solution :
You need to specify how you want the elements to align themselves, you can do that by using the align-content property on the flexbox container
#helloFlex div {
align-content: flex-start;
}