I want to create a View as flexDirection="row". but I cannot use alignSelf when I use flexDirection="row". now, How can I use this figure:

|                                                 |
|LeftItem-1  LeftItem-2                  RightItem|
|                                                 |

I want to create a View as flexDirection="row". but I cannot use alignSelf when I use flexDirection="row". now, How can I use this figure:

|                                                 |
|LeftItem-1  LeftItem-2                  RightItem|
|                                                 |

• javascript
• react-native
• flexbox

Share Follow edited Feb 14, 2019 at 16:27 Brian 3,91444 gold badges2323 silver badges3838 bronze badges asked Feb 14, 2019 at 10:15 S.M_EmamianS.M_Emamian 17.4k4040 gold badges154154 silver badges273273 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

When you are using flexDirection="row" then alignSelf work vertically. When you are using flexDirection="column" then alignSelf work horizontally.

So for that, you have to use JustifyContent.

<View style={{flexDirection: "row"}}>
    <View style={{flexDirection: "row",flex:1}}>
        <Text> LeftItem-1   </Text>
        <Text> LeftItem-2   </Text>
    </View>
    <Text> LeftItem-3   </Text>
</View>

This way you can achieve your output.

You can learn more about flexbox here: https://css-tricks./snippets/css/a-guide-to-flexbox/

There are a few ways to achieve this. One simple way to achieve the layout you require would be via the following:

<View style={{ flexDirection : "row" }}>
    <Text>LeftItem-1</Text>
    <Text>LeftItem-2</Text>
    <View style={{ flex : 1 }}></View>
    <Text>RightItem</Text>
</View>

Another option would be to group the left elements in a <View> and then use the space-between - this would however add extra plexity to your view structure and styling:

 <View style={{ flexDirection : "row", justifyContent:"space-between" }}>
    <View style={{ flexDirection : "row" }}>
      <Text>1</Text>
      <Text>2</Text>
    </View>
    <Text>RightItem</Text>
</View>

Group left side in one group, and use

justify-content:space-between;

When you’re using a flexbox with flexDirection="row",

alignSelf, as well as the alignItems property, refers to how items are aligned vertically

If you want to create this exact figure, put your two left items in a div, and use

justify-content:space-between;

to set the two group far apart horizontally