CODEWITHSUNDEEP
javascriptreact-nativeflexbox
S.M_Emamian
S.M_Emamian

Reputation: 17393

How to set alignSelf for flexDirection=row

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

Upvotes: 2

Views: 1490

Answers (4)

Shashin Bhayani
Shashin Bhayani

Reputation: 1576

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.com/snippets/css/a-guide-to-flexbox/

Upvotes: 5

Dacre Denny
Dacre Denny

Reputation: 30390

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

Upvotes: 3

Albizia
Albizia

Reputation: 599

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

Upvotes: 1

Milos N.
Milos N.

Reputation: 4881

Group left side in one group, and use 

justify-content:space-between;

Upvotes: 1

Related Questions