title: Align Items flex end react native
body: <p>I am new to flexbox styling. I am facing problem while trying to align an element in the flexbox to the rightmost corner. I have written the following code to align the plus symbol in the image to the right corner of the red box but its not working as expected. Kindly help me to resolve this issue. 
  <a href="https://i.stack.imgur.com/ckRPn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ckRPn.png" alt="The plus icon in the image has to be aligned to the rightmost corner of the red box."></a></p>
  
  <pre><code>    &lt;View style={main_container}&gt;
        &lt;ScrollView&gt;
            &lt;TouchableHighlight&gt;
                  &lt;View style={container}&gt; 
                      &lt;Image style={imageStyle} source={{uri: this.props.data.picture}} /&gt;
                      &lt;Text style={textStyle}&gt; {this.props.data.company} &lt;/Text&gt;                  
                      &lt;Text style={iconStyle}&gt; 
                          &lt;Icon name={'plus-circle'} size={20} color={'#003057'} /&gt;
                      &lt;/Text&gt;
                  &lt;/View&gt;
              &lt;/TouchableHighlight&gt;
        &lt;/ScrollView&gt;
        &lt;Footer /&gt;
       &lt;/View&gt;
  
       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 ? 
          }
       });
  </code></pre>