CSS CSS Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

Brandon Wie
Brandon Wie
Full Stack JavaScript Techdegree Student 11,249 Points

Flex-basis doesn't work properly on Google Chrome

Hi, folks. This is Brandon. As I read from several articles, I understand that the flex-basis function is not supported well yet on every browser. However, I would like to ask you if any of you has the same problem as I have. So, according to Guil,

.item { flex: 1; }

this should set the flex basis to zero automatically. Therefore, there shouldn't be a second line in the container; however, on my Google Chrome browser, <ITEM4> moves down to the second line when the total width of the flex container is less than around 473px.

Thank you so much for sharing your experience and have a nice day. :)

Jamie Reardon
Jamie Reardon
Front End Web Development Techdegree Student 12,519 Points

Would be great to see your css code to evidence this. Most of (if not all) of the teaching is tested in Google chrome.

1 Answer

Ling Lei
Ling Lei
6,082 Points

Check if you haven't got your flex-flow set to "nowrap" in your flex-container, otherwise if the content of the flex items are too large to be evenly distributed on one line and there for are wrapping to a new line.