Fixed spacing for wrapped elements #85

2015-05-12T02:02:06-07:00

nicklockwood commented

2015-05-12 02:02:06 -07:00

(Migrated from github.com)

I found that the spacing behavior was incorrect (or at least not what I would expect) when working with wrapped elements. The following code:

container: {
  width: 320,
  height: 320,
  backgroundColor: 'red',
  flexDirection: 'row',
  justifyContent: 'space-between',
  flexWrap: 'wrap'
},
cell: {
  width: 100,
  height: 100,
  backgroundColor: 'blue',
  marginBottom: 10
}

Was producing the following output:

Whereas I would expect it to produce this:

The problem appeared to be that it was spacing the three items as if there were four items, and this was due to the fact that after it detected that the fourth item had wrapped, it failed to decrement the item count for the row back down to three.

I found that the spacing behavior was incorrect (or at least not what I would expect) when working with wrapped elements. The following code: ``` container: { width: 320, height: 320, backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap' }, cell: { width: 100, height: 100, backgroundColor: 'blue', marginBottom: 10 } ``` Was producing the following output: ![ios-simulator-screen-shot-12-may-2015-09 16 52](https://cloud.githubusercontent.com/assets/546885/7583477/96cabfb8-f88d-11e4-9838-6e9c2671f1e0.png) Whereas I would expect it to produce this: ![ios-simulator-screen-shot-12-may-2015-09 16 52-2](https://cloud.githubusercontent.com/assets/546885/7583495/bae1bb90-f88d-11e4-8cd5-0df0a1ff192f.png) The problem appeared to be that it was spacing the three items as if there were four items, and this was due to the fact that after it detected that the fourth item had wrapped, it failed to decrement the item count for the row back down to three.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#85