Как выровнять flexwrap по левому краю?

Question

Компонент, который остался один, должен быть слева. Я попытался использовать align-items: 'flex-start', но это не сработало.

Я пытаюсь создать адаптивный макет, в котором он вписывается в несколько компонентов, в зависимости от размеров устройство пользователя.

  <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

Привет :) Я бы предложил сделать следующее:

1. вычислить левое / правое поле в соответствии с шириной контейнера & элемента

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

используйте space-between & marginHorizontal, примененные к контейнеру:

 <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>

, дайте мне знать, помогло это или нет;)