0

The issue I'm having is that the flexbox isn't centering my pictures throughout resizing the browser tab. Picture for an example.

img

As seen the items in the center aren't centering at all times and leave a big space on the right side until the next item wraps.

This is the html page fully stretched out it still has the space on the right and even the align-items tag doesn't work.

i

I've tried to shift the flex properties to different containers. I've tried to add other properties such as flex-wrap:1 etc.. but it seems to make no difference whatsoever.

<!DOCTYPE html>
<html>
<head>
    <title>rera</title>
</head>
<body>
    <div id="articleContainer">
        <div id="itemContainer">

                <img id="logopic" src="logo.png">

                <img id="logopic" src="logo.png">

                <img id="logopic" src="logo.png">

                <img id="logopic" src="logo.png">

                <img id="logopic" src="logo.png">

                <img id="logopic" src="logo.png">

                <img id="logopic" src="logo.png">
        </div>


    </div>

</body>

</html>

<style>

#articleContainer {
    display:flex;
    justify-content:center;
    height:100%;
    width:100%;
}

#itemContainer {
    align-items:center;
}

#logopic {
    margin-right:10px;
    margin-left:10px;
    height:20%;
}


</style>

I've been stuck for a long time and I thought I was getting somewhere. I apologize for my awful code as I've gotten back into learning recently.

Thank you

anhnq
  • 296
  • 4
  • 15
SepZ
  • 11
  • 6

1 Answers1

0

Try this using this code, I just moved 2 lines from #articleContainer to #itemContainer and added flex-wrap: wrap;

#articleContainer {
    height:100%;
    width:100%;
}

#itemContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#logopic {
    margin-right:10px;
    margin-left:10px;
    height:20%;
}
TOMBA
  • 205
  • 1
  • 11