對齊項目flex end react native

Question

我是新來的flexbox造型。嘗試將柔性盒中的元素對齊到最右角時，我遇到了問題。我已經編寫了下面的代碼，將圖像中的加號與紅框的右上角對齊，但不能按預期工作。請幫我解決這個問題。

<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 ? 
     } 
    }); 

Answer 1

flex-end工作橫軸和垂直方向推圖標端（它的父的底部），它可以在代碼中看到的，它不居中作爲文本和圖像。

爲了使這項工作，你需要在container:display: flex，在textStyle:這將使其採取一切可用的空間，推動iconStyle:最右側設置flex: 1;。

如果margin-left: auto將可（在iconStyle:），這將做到這一點沒有flex: 1，但你仍然需要在container:

的display: flex並且應該在main_container:display: flex過，除非這是別處自動添加（這同樣適用於container:）

樣品片段

div { 
 
    display: flex; 
 
    align-items: center; 
 
    background: lightgray; 
 
    height: 50px; 
 
    margin-bottom: 5px 
 
} 
 
span { 
 
    padding: 5px; 
 
} 
 

 
div.nr1 span:nth-child(2) { 
 
    flex: 1; 
 
} 
 

 
div.nr2 span:nth-child(3) { 
 
    margin-left: auto; 
 
}

<div class="nr1"> 
 
    <span>image</span> 
 
    <span>text</span> 
 
    <span>icon</span> 
 
</div> 
 

 
<div class="nr2"> 
 
    <span>image</span> 
 
    <span>text</span> 
 
    <span>icon</span> 
 
</div>