Как установить alignSelf для flexDirection=row
Я хочу создать View как flexDirection = "row".
но я не могу использовать alignSelf, когда использую flexDirection = "row".
теперь, как я могу использовать эту цифру:
| |
|LeftItem-1 LeftItem-2 RightItem|
| |
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Сгруппируйте левую сторону в одну группу и используйте
justify-content:space-between;
Когда вы используете flexbox с flexDirection = "row",
alignSelf, а также свойство alignItems относятся к тому, как элементы выравниваются по вертикали.
Если вы хотите создать именно эту фигуру, поместите два оставшихся элемента в div и используйте
justify-content:space-between;
установить две группы далеко друг от друга по горизонтали
Есть несколько способов добиться этого. Один из простых способов добиться нужного вам макета — это сделать следующее:
<View style = {{ flexDirection : "row" }}>
<Text>LeftItem-1</Text>
<Text>LeftItem-2</Text>
<View style = {{ flex : 1 }}></View>
<Text>RightItem</Text>
</View>
Другой вариант — сгруппировать левые элементы в <View>, а затем использовать space-between — однако это усложнит структуру и стиль вашего представления:
<View style = {{ flexDirection : "row", justifyContent:"space-between" }}>
<View style = {{ flexDirection : "row" }}>
<Text>1</Text>
<Text>2</Text>
</View>
<Text>RightItem</Text>
</View>
Когда вы используете flexDirection = "row", alignSelf работает вертикально. Когда вы используете flexDirection = "column", alignSelf работает горизонтально.
Так что для этого вы должны использовать 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>
Таким образом, вы можете добиться своего результата.
Вы можете узнать больше о flexbox здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/