React native flexbox如何垂直对齐项目？答案

【问题标题】：React native flexbox how to align items vertically?React native flexbox如何垂直对齐项目？
【发布时间】：2018-07-06 19:19:23
【问题描述】：

我有点困惑为什么这个 flex 不起作用。

 <View
style={{
    display: "flex",
    flexWrap: "wrap"
}}
>
<View style={{ width: "40%", alignSelf: "flex-start" }}>
    <Button BUY</Button>
    <View style={{ alignSelf: "center", marginTop: "2%" }}>// A logo</View>
</View>
<View style={{ width: "40%", alignSelf: "flex-end" }}>
    <AreaChart
        style={{ height: 250 }}
        dataPoints={data}
        contentInset={{ top: 30, bottom: 30 }}
        curve={shape.curveNatural}
        svg={{
            fill: "rgba(134, 65, 244, 0.2)",
            stroke: "rgb(134, 65, 244)"
        }}
    />
</View>
</View>;

我想要的预期布局是：

BUTTON  |   <CHART
LOGO    |   CHART>

按钮和徽标居中，图表占据右侧的两个“框”。

但是，上述标记会产生以下内容：

BUTTON |
LOGO   |
       | CHART
       | CHART

他们在做正确的事，但图表从徽标结束的地方开始。

flexbox 哪里出错了？如何生成正确的布局？

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
我们需要输出 HTML & CSS

标签： css react-native flexbox

【解决方案1】：

由于 React Native 中默认的 flexDirection 是 column，弹性项目将垂直堆叠，因此图表呈现在它自己的一行上。

通过在第二个子View 上使用alignSelf: "flex-end"，这对于columns 控制交叉轴（水平），它将右对齐。

要将它们并排对齐，请将flexDirection: "row" 添加到父View。

您还可以删除两个子 View 上的 alignSelf 属性，除非您希望第二个 View (alignSelf: "flex-end") 与底部对齐。

更新的代码示例

<View style={{
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap"
}}>
    <View style={{width: "40%"}}>
        <Button
            BUY
        </Button>
        <View style={{alignSelf: "center", marginTop: "2%"}}>
            // A logo
        </View>
    </View>
    <View style={{ width: "40%"}}>
        <AreaChart
            style={{height: 250}}
            dataPoints={data}
            contentInset={{top: 30, bottom: 30}}
            curve={shape.curveNatural}
            svg={{
                fill: 'rgba(134, 65, 244, 0.2)',
                stroke: 'rgb(134, 65, 244)',
            }}
        />
    </View>
</View>

【讨论】：