Question

我想在主轴上对齐一个项目。例如，我想要一个行，其中一些孩子都向左对齐，然后一个孩子在右侧对齐。

你可以通过＆＃34; position：absolute;对：0＆＃34;，但我想知道是否有更好的方法。看起来应该有一个justifySelf属性，它只会影响一个孩子并影响它在主轴上的对齐，就像alignSelf影响一个孩子在二级孩子上的对齐一样轴。

然而，似乎没有这样的justifySelf存在。这是为什么？

它类似于这个问题但并不完全：How can you float: right in React Native?

Answer 1

我不知道React Native，但我确实知道flexbox！

使用以下代码作为指南：

<div style="display: flex;">

  <div>
    I'll be on the left side
  </div>
  <div>
    I'll be hugging the guy on the left side
  </div>
  <div>
    I'll be hugging the guy hugging the guy on the left side
  </div>
  <div style="margin-left: auto;">
    I'll be hugging the right side far away from those other guys
  </div>

</div>

在最后一个孩子上设置的边距会将所有其他孩子推到左边，直到他们的样式允许，并按照其他任何样式允许的方式向右推动。

您可以通过向最后一个孩子添加margin-right: auto;来测试这一点，并且在前三个孩子占用他们分配的空间后，您将看到最后一个孩子在父div的剩余空间中完美居中。这是因为竞争的“保证金汽车”将平均分享剩余的空间，因为它们不能相互抵消，也不会互相覆盖。

Flex框被设计为像这样处理边距，因此利用它，以及justify-content属性下可用的其他独特间距选项。

有用的文章：https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

Answer 2

我相信您想要实现以下目标：

您可以通过嵌套共享相同justifyContent属性的视图来实现此目的。

  <View style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
  }}>
    <View>
      <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
      <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    </View>
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
  </View>

Answer 3

您可以查看Flex Docs！

将flexDirection添加到组件的样式会确定其布局的主轴。

然后：

将alignItems添加到组件的样式确定子项沿辅助轴的对齐方式（如果主轴是行，则辅助是列，反之亦然）。

所以你想要的代码是：

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

更新

如果您的意思是这样的图像：

然后我会建议你这个：

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";

class Playground extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.boxes} />
        <View style={styles.boxes} />
        <View
          style={[
            styles.boxes,
            {
              backgroundColor: "crimson",
              position: "absolute",
              right: 0
            }
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  boxes: {
    width: 50,
    height: 50,
    marginLeft: 1, // to separate each box!
    backgroundColor: "steelblue"
  }
});

export default Playground;

据我所知these props，这是最好的方法！

Answer 4

部分答案：React Native中没有justifySelf，因为在真正的CSS中没有justify-self用于flexbox。 {em> 有一个justify-self CSS属性，但在flexbox布局中没有任何作用。您可以在https://drafts.csswg.org/css-align-3/#overview的规范中看到justify-self被定义为适用于：

块级框，绝对定位的框和网格项

其中明显不包含“灵活项目”。

好的，但是为什么在CSS中会这样呢？ MDN提供an explanation，您可能会满意也可能不会满意：

Flexbox中没有自辩成真

在主轴上，Flexbox作为一个整体来处理我们的内容。计算出布置物品所需的空间量，然后剩余的空间可用于分配。 justify-content属性控制如何使用剩余空间。设置justify-content: flex-end，将多余的空间放在项目之前，justify-content: space-around，并将其放置在该维度中项目的两侧，等等。

这意味着justify-self属性在Flexbox中没有意义，因为我们一直在处理整个项目组。

在交叉轴align-self上很有意义，因为我们可能会在该维度的flex容器中有额外的空间，在其中可以将单个项目移动到开始和结束位置。

这显然有某种意义。将alignSelf: 'center'放在弹性项目上，要求它在横轴上居中始终是有意义且连贯的。但是，例如，将justifySelf: 'center'放在弹性项目上，要求它以主轴为中心是什么意思呢？如果以前的伸缩项目已经沿该轴填充了一半以上的空间，应该如何处理？

保证金为您这样的案件提供了很好的解决方案。另一方面，justifySelf对于flexbox来说是不合理的，因为justifyContent值指定了分配 flex项目的方式，并对它的含义进行了一点思考而是将它们应用于单独指定的项目表明，这样做基本上是不连贯的。

Answer 5

有一个简单的方法可以在没有绝对定位的情况下准确地将所有高度不同的项目正确排列在y轴上，从而完全按照您的期望进行工作。

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  <View style={{ backgroundColor: 'green', height: 50, width: 50 }} />
  <Text style={{flex: 1}}> text in here because why not!</Text>
  <View style={{ backgroundColor: 'yellow', width: 30, height: 30 }} />
</View>

Answer 6

我真的认为，解决此问题的最佳方法是用<View>将position: "absolute"内显示的内容包装起来，然后将position: "absolute"添加到所需的元素中。然后，在<View>内，添加justifyContent: "center",和alignItems: "center"。希望这可以解决问题。

为什么React Native不提供自我辩护

6 个答案:

更新

Flexbox中没有自辩成真