Div elements do not wrap on the next line

Mobile Technologies Mobile Computing 3 years ago

4.74K 1 0 0 0

_x000D_ _x000D_ I defined flexbox properties of container display: flex; flex-wrap: wrap; justify-content: center; but there are always 3 divs on the first row and 2 divs on the second. How to make it wrap divs when the browser resizes? I tried almost everything (changed the width and height of parent container, changed width to min-width/max-width, set margin of parent container margin: 0 auto;).

Tea of the Month

What's Stepping at The Tea Cozy?

Fall Berry Blitz Tea

Spiced Rum Tea

Seasonal Donuts

Myrtle Ave Tea

Bedford Bizarre Tea

/* CSS */ .parent { display: flex; flex-wrap: wrap; justify-content: center; width: 1000px; margin: 0 auto; } .headline { display: block; width: 100%; } .container { margin: 0px 10px; } .image { width: 300px; height: 200px; } I expect the divs would wrap on next line. But there always are 3 divs on first and 2 divs on second line.

User submissions are the sole responsibility of contributors, with TuteeHUB disclaiming liability for accuracy, copyrights, or consequences of use; content is for informational purposes only and not professional advice.

Answers (1)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 3 years ago
_x000D_ Your HTML contained some invalid closure tags, please validate your HTML you can check out: https://validator.w3.org/ Also removed the fixed width of 1000px, you want to have a fluid parent so it sizes acording to the device or browser width. _x000D_ _x000D_ /* CSS */_x000D_ _x000D_ .parent {_x000D_ display: flex;_x000D_ flex-wrap: wrap;_x000D_ justify-content: center;_x000D_ margin: 0 auto;_x000D_ /* changed */_x000D_ width: 100%;_x000D_ }_x000D_ _x000D_ .headline {_x000D_ display: block;_x000D_ width: 100%;_x000D_ }_x000D_ _x000D_ .container {_x000D_ margin: 0px 10px;_x000D_ }_x000D_ _x000D_ .image {_x000D_ width: 300px;_x000D_ height: 200px;_x000D_ }_x000D_ _x000D_
_x000D_
_x000D_

Tea of the Month

_x000D_

What's Stepping at The Tea Cozy?

_x000D_
_x000D_
_x000D_ _x000D_

Fall Berry Blitz Tea

_x000D_
_x000D_ _x000D_
_x000D_ _x000D_

Spiced Rum Tea

_x000D_
_x000D_ _x000D_
_x000D_ _x000D_

Seasonal Donuts

_x000D_
_x000D_ _x000D_
_x000D_ _x000D_

Myrtle Ave Tea

_x000D_
_x000D_ _x000D_
_x000D_ _x000D_

Bedford Bizarre Tea

_x000D_
_x000D_
_x000D_ _x000D_

Bedford Bizarre Tea

_x000D_
_x000D_
_x000D_ _x000D_

Bedford Bizarre Tea

_x000D_
_x000D_
_x000D_ _x000D_
0 views
0 shares

No matter what stage you're at in your education or career, TuteeHUB will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.

Similar Forum


Q

Would Firebase be a good choice as a server for the Flutter mobile game I'm creating?

_x000D_ _x000D_ I am building a turn-based Flutter game. Would Firebase be a good choice as a server...
Q

Implement Bottom Navigation activity along with a VerticalViewPager with nested Cardview in Android...

_x000D_ _x000D_ I want to develop an Android App which will have a Bottom Navigation Bar and above i...
Q

(JS) For , determine if the device offers or not to capture a photo from the camera

_x000D_ _x000D_ When uploading a file, I need to give the user the possibility: upload the file fr...
View All

Important Mobile Technologies Links