如何为 flexDirection=row 设置 alignSelf答案

【问题标题】：How to set alignSelf for flexDirection=row如何为 flexDirection=row 设置 alignSelf
【发布时间】：2019-07-08 08:04:05
【问题描述】：

我想创建一个View 作为flexDirection="row"。但是当我使用flexDirection="row" 时，我不能使用alignSelf。现在，我该如何使用这个数字：

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

【问题讨论】：

标签： javascript react-native flexbox

【解决方案1】：

将左侧分组为一组，并使用

justify-content:space-between;

【讨论】：

【解决方案2】：

当您使用带有flexDirection="row" 的弹性框时，

alignSelf 以及 alignItems 属性指的是项目如何垂直对齐

如果你想创建这个精确的数字，把你的两个左边的项目放在一个 div 中，然后使用

justify-content:space-between;

使两组水平相距较远

【讨论】：

【解决方案3】：

有几种方法可以实现这一点。实现所需布局的一种简单方法是通过以下方式：

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

【讨论】：

【解决方案4】：

当您使用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/

【讨论】：