我对flexbox样式不熟悉。在尝试将元素对齐到flexbox的右上角时遇到了问题。我编写了以下代码,以将加号符号对齐到红色框的右上角,但它并没有按预期工作。请帮助我解决这个问题。
![图像中的加号图标必须对齐到红色框的右上角。](https://istack.dev59.com/ckRPn.webp)
<View style={main_container}>
<ScrollView>
<TouchableHighlight>
<View style={container}>
<Image style={imageStyle} source={{uri: this.props.data.picture}} />
<Text style={textStyle}> {this.props.data.company} </Text>
<Text style={iconStyle}>
<Icon name={'plus-circle'} size={20} color={'#003057'} />
</Text>
</View>
</TouchableHighlight>
</ScrollView>
<Footer />
</View>
const styles = StyleSheet.create({
main_container: {
flex: 1,
flexDirection: 'column',
marginTop: 70
},
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
margin: 6,
backgroundColor: 'red'
},
imageStyle: {
width: 50,
height: 50
},
textStyle: {
fontSize: 10
},
iconStyle: {
backgroundColor: 'yellow',
alignSelf: 'flex-end' //why is it aligning the image vertically ?
}
});
margin-left: auto
- 这会将它向右推。 - pol