How to align flexwrap to the left?

Question

The component that was left alone should be on the left. I tried to use align-items: 'flex-start', but it didn't work.

I'm trying to make a responsive layout where it fits several components in line, depending on the dimensions of the user's device.

  <View style={{flex: 1}}>
    <ScrollView showsHorizontalScrollIndicator={false}>
      <View
        style={{
          justifyContent: 'space-evenly',
          flex: 1,
          flexDirection: 'row',
          flexWrap: 'wrap',
        }}>
        <View
          style={{
            backgroundColor: 'red',
            width: width / 2.5,
            height: 200,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Image
            style={{
              width: 100,
              height: 100,
            }}
            source={{
              uri:
                'https://images-na.ssl-images-amazon.com/images/I/51JZpJPClEL._AC_SL1000_.jpg',
            }}
          />
          <Text>Xiaomi Redmi note 8</Text>
        </View>
      </View>
    </ScrollView>
  </View>

Answer 1

Hello :) I would suggest doing the following:

1. calculate the left/right margin according to the container's & item's width

const marginHorizontal =  (width / 2.5) / 6; // where 6 is 2 blocks in a row multiplying 3 spaces (left-right-center)

2. use the space-between & marginHorizontal applied to the container:

 <View style={{flex: 1}}>
    <ScrollView showsHorizontalScrollIndicator={false}>
      <View
        style={{
          justifyContent: 'space-between',
          flex: 1,
          flexDirection: 'row',
          flexWrap: 'wrap',
          marginHorizontal,
        }}>
        <View
          style={{
            backgroundColor: 'red',
            width: width / 2.5,
            height: 200,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Image
            style={{
              width: 100,
              height: 100,
            }}
            source={{
              uri:
                'https://images-na.ssl-images-amazon.com/images/I/51JZpJPClEL._AC_SL1000_.jpg',
            }}
          />
          <Text>Xiaomi Redmi note 8</Text>
        </View>
      </View>
    </ScrollView>
  </View>

let me know if it helped or not ;)