1

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

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

enter image description here

gkd
  • 853
  • 1
  • 14
  • 31
  • 1
    the reason why after 5th element there is some space is that items has a fixed dimension 70px in your case, the next element does not fit a space that is less than that and goes into another line. for your result use `align-content: flex-start;` in the parent – Gone Jun 10 '23 at 17:44

1 Answers1

1

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;
}
chesiren
  • 66
  • 1
  • 2
  • 7