First Responsive Flexbox Attempt

Hello everyone and thanks for your help in advance. I am making my first attempts into using Flexbox and Responsive design, but am having problems with basic display. I have a sample at http://www.kidsmedicalcare.net/home/index3. The issue is the center panel which is displaying incorrectly. I’m not sure why, since the preceding two div tags occupy 100% of the parent container, so I would think the divmainbody would display, at the very least, below the two header divs. Any help would be appreciated.

Can you come up with a quick drawing of the layout you’re expecting to see? It may help visualise what you’re after.

By default display:flex is set not to wrap so it tries to squeeze everything into one line. If you want items to wrap when there’s no room left on the line then you need to tell it so.

e.g.


#divpagewrap{
 display:  flex; 
width:  90%;
 flex-wrap: wrap;
}
1 Like

I’m looking to accomplish something like http://www.kidsmedicalcare.com/, only in a responsive layout.

Thanks for the response. That changed the display, but I thought, since there would not be enough room, it would wrap automatically. Also, I thought the default for flexbox was to wrap.

No, the default is ‘nowrap’ as I mentioned above. :slight_smile:

Have a look here for the finer details.

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