Flex-Wrap width of a div

Just a simple thig, when I include flex-wrap:wrap; the div sizes increase while not includiong its size is reduces significantle. I even inspected, the total width doesnt match at all.

<head>

    <title>PPractice</title>

    <link href="stylesheet/style.css" rel="stylesheet">

</head>

<body>

    <h1>Practice Flexbox</h1>

    <div class="flex0">

        <div class="flex1"><h1>box1</h1></div>

        <div class="flex1"><h1>box1</h1></div>

        <div class="flex1"><h1>box1</h1></div>

        <div class="flex1"><h1>box1</h1></div>

        <div class="flex1"><h1>box1</h1></div>

        <div class="flex1"><h1>box1</h1></div>

        <div class="flex1"><h1>box1</h1></div>

    </div>

</body>

body{

width: 60%;

margin: 0;

padding: 0;

border:0;

}

.flex0{

display: flex;

justify-content: space-evenly;

flex-wrap: wrap;    

gap: 250px;

}

.flex1{

background-color: rgb(121, 7, 7);

width: 100%;

}

.flex1 h1{

font-size: 1.75em;

}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.