0

I am trying to format my items into a grid view using ReactNative. However, when the items count is odd, it will show as per the picture attached. Anyway can format the third item to align left?

ListView css

grid: {
        justifyContent: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',
        flex: 1,
    },

enter image description here

Asons
  • 84,923
  • 12
  • 110
  • 165
jokerday
  • 136
  • 1
  • 10
  • Basically, not natively with flexbox. - https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items – Paulie_D Aug 22 '17 at 14:34

1 Answers1

2

Change justifyContent property to be 'flex-start'

Ashish Dulhani
  • 102
  • 5
  • looks great, but if the device has smaller width, then each row will have only one item and aligned to left? anyway can make align to center for that case? – jokerday Aug 22 '17 at 13:16
  • 1
    I think that goes against the question. But again, if the image view is of constant width you can get device width and with simple comparison you can dynamically set the css as 'center' or 'flex-start'. – Ashish Dulhani Aug 22 '17 at 13:37
  • @jokerday and Ashish: That's what media query's is for... – Asons Aug 22 '17 at 14:05
  • Display Items in grid using flatlist. It is the best option – Paras Watts Aug 23 '17 at 04:24