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

flex-basis: 0; | items break to new lines.

it seems that items cannot shrink to 0 pixels and they break to new lines with a flex-basis set to 0;

.container { display: flex; flex-wrap: wrap; }

.item{ flex-grow: 1; flex-basis: 0; }

whats wrong ?

2 Answers

Zach Hetrick
Zach Hetrick
Front End Web Development Techdegree Student 7,806 Points

Vasilis,

You're right! My guess is Guil was using an older version of Chrome? You can see Guil has 'flex-wrap: wrap' and when he sets his flex-basis to 0, his flex-items do not wrap, but mine do and it seems that yours do too. As far as I can tell, the only way to get them to not wrap is to set flex-wrap to nowrap.

Dmitry Polyakov
Dmitry Polyakov
4,950 Points

Container is set up as flex-wrap: wrap. This attribute makes all items inside the container to wrap onto a new line.

Try flex-wrap: no-wrap