How to use alignItems with flex value and wrap?

Question

While checking out the tutorial here: https://facebook.github.io/react-native/docs/flexbox.html#align-items, I was unable to get the alignItems value to align the rows without any space between when I added flexWrap:'wrap' to the parent view (and enough child views such that it'd wrap). Flexbox acted as if it had a 'space-between' requirement for the rows.

<View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    flexWrap:'wrap',
    alignItems: 'flex-start'
  }}>
  ** Enough Views to get a wrap **
</View>

Setting flex:0 gets me the results I wanted:

The same behavior is expressed when I use flexDirection:'column', except no matter what I set the flex value to, I get the unwanted behavior:

Am I using flexbox incorrectly? Or is this a bug inside of react-native's flexbox?

This looks like an issue of `align-content: stretch`. But apparently there's no equivalent property in React Native. Here's a description of the problem: http://stackoverflow.com/q/40890613/3597276 — Michael Benjamin, Mar 09 '17 at 19:24
Yea, I came across align-content as well. Adding alignContent:'flex-start' field to this simulator actually fixes the problem, but this solution breaks when you try it out on an actual react-native build. — afathman, Mar 09 '17 at 19:27
related: [How does flex-wrap work with `align-self`, `align-items` and `align-content`?](http://stackoverflow.com/q/42613359/3597276) — Michael Benjamin, Mar 19 '17 at 19:53
Pretty sure this is a bug with react-native, I filed a bug here: https://github.com/facebook/react-native/issues/12836 — afathman, Mar 21 '17 at 15:23

score 0 · Accepted Answer · answered Apr 05 '17 at 17:31

0

With the newest version of React Native v0.43.1, this issue is fixed and alignContent is exposed in React Native.

answered Apr 05 '17 at 17:31

afathman

5,993
2
20
28

How to use alignItems with flex value and wrap?

1 Answers1