为什么React.js不能提供合理的自我

Question

我想在主轴上对齐一个项目.

有justifySelf用于辅助轴,但不能alignSelf用于主轴线.为什么是这样？

编辑:看来我的问题不明确.我想要的是,例如,一行有几个孩子全部对齐左,然后一个孩子在右侧对齐.

你可以用"position:absolute; right:0"之类的东西来达到这个效果,但我想知道是否有更好的方法.在我看来,"justifySelf"会实现这一点,类似于"alignSelf",因为它只影响一个孩子.

它与这个问题类似,但并不完全:你怎么能漂浮:在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

有一种简单的方法可以在没有绝对定位的情况下执行此操作，该方法完全符合您的期望，所有不同高度的项目都适当地排列在 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 4

部分答案：justifySelfReact Native中没有justify-self，因为在真正的CSS中没有flexbox。这里是一个justify-selfCSS属性，但它不会做Flexbox的布局什么。您可以在规范看到https://drafts.c​​sswg.org/css-align-3/#overview是justify-self被定义为适用于：

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

特别是其中不包含“弹性项目”。

好的，但是为什么在CSS中会这样呢？MDN提供了一个可能使您满意的解释：

Flexbox中没有自我证明

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

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

在横轴上align-self是有意义的，因为我们可能会在该维度的flex容器中有额外的空间，在其中可以将单个项目移动到起点和终点。

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

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

Answer 5

你可以看看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;

据我所知，这些道具是最好的方法！