Hacker News new | ask | show | jobs
by speg 4204 days ago
How does this work responsively? I was initially reading this on my phone, and the first example says the middle item is not allowed to grow so the left and right have been given an equal share so they are sized evenly.

Except on my phone I was seeing the left and middle taking up 50% and the right one being pushed down and taking up 100%.
2 comments
altano 4204 days ago
flex-shrink dictates how negative free space should be distributed. When there is no free space, it is irrelevant.

In addition to that, below a certain width, the CSS on the parent UL is being changed from flex-wrap: nowrap; to flex-wrap: wrap;, so when the container shrinks to a width smaller than the sum of the flex-basis of all elements, it will wrap.

Keep in mind I haven't read the flex spec yet, though, so that's based on observation not spec.

link
joshuahutt 4204 days ago
What kind of phone do you have?
link