javascript 为什么 React Native 不提供 justify-self
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50847577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does React Native not offer a justify-self
提问by Varun Singh
I want to align an item in the primary axis. For example, I want to have a row with a few children all aligned left, and then one child aligned on the right side.
我想在主轴上对齐一个项目。例如，我想要一行有几个孩子都向左对齐，然后一个孩子在右侧对齐。
You could achieve that effect with something like "position: absolute; right: 0", but I'm wondering if theres a better way. It seems like there ought to be a justifySelfproperty, that only affects one child and affects its alignment on the primary axis, in the same way the alignSelfaffects one child's alignment on the secondary axis.
您可以使用“位置：绝对；正确：0”之类的方法来实现这种效果，但我想知道是否有更好的方法。似乎应该有一个justifySelf属性，它只影响一个孩子并影响它在主轴上的对齐方式，就像alignSelf影响一个孩子在辅助轴上的对齐方式一样。
Yet no such justifySelfseems to exist. Why is this?
然而，justifySelf似乎没有这样的存在。为什么是这样？
It's similar to this question but not quite: How can you float: right in React Native?
它类似于这个问题，但不完全是：How can you float: right in React Native?
采纳答案by Ben Steward
I don't know React Native, but I do know flexbox!
我不知道 React Native，但我知道 flexbox！
Use the following code as a guide:
使用以下代码作为指导：
<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>
The margin set on the last child will push all other children to the left as far as their styles will allow, and push itself as far right as any other styles will allow.
设置在最后一个子级上的边距会将所有其他子级在其样式允许的范围内推向左侧，并在任何其他样式允许的范围内将自身推到最右侧。
You can test this out by also adding margin-right: auto;to the last child, and you will see the last child centered perfectly in the remaining space of the parent div, after the first three children take up their allotted space. This is because the competing "margin autos" will both share equally whatever space remains, since they can't cancel each other out and won't override each other.
您还可以通过添加margin-right: auto;到最后一个子项来测试这一点，并且在前三个子项占用分配的空间之后，您将看到最后一个子项完美地居中在父 div 的剩余空间中。这是因为相互竞争的“边际汽车”将平等共享剩余的空间，因为它们不能相互抵消，也不会相互覆盖。
Flex box was designed to handle margin spacing like this, so take advantage of it, as well as the other unique spacing options available under the justify-contentproperty.
Flex box 旨在处理这样的边距，因此请充分利用它，以及该justify-content属性下可用的其他独特的间距选项。
Helpful article: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6
有用的文章：https: //hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6
回答by db42
I believe you want to achieve something like this:
我相信你想实现这样的目标：
You can implement this by nesting views which share the same justifyContentproperty.
您可以通过嵌套共享相同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>
回答by Mark Amery
A partial answer: there's no justifySelfin React Native because there's no justify-selffor flexbox in real CSS. There isa justify-selfCSS property, but it doesn't do anything in flexbox layouts. You can see in the spec at https://drafts.csswg.org/css-align-3/#overviewthat justify-selfis defined to apply to:
部分答案：justifySelfReact Native 中没有，因为justify-self真正的 CSS 中没有flexbox。这里是一个justify-selfCSS属性，但它不会做Flexbox的布局什么。您可以在规范看到https://drafts.csswg.org/css-align-3/#overview是justify-self被定义为适用于：
block-level boxes, absolutely-positioned boxes, and grid items
块级框、绝对定位框和网格项
which notably doesn't include "flex items".
其中不包括“弹性项目”。
Okay, but why is this the case in CSS? MDN offers an explanationthat you may or may not find satisfactory:
好的，但是为什么在 CSS 中会出现这种情况？MDN 提供了一种解释，您可能会也可能不会感到满意：
There is no justify-self in Flexbox
On the main axis Flexbox deals with our content as a group. The amount of space required to lay out the items is calculated, and the leftover space is then available for distribution. The
justify-contentproperty controls how that leftover space is used. Setjustify-content: flex-endand the extra space is placed before the items,justify-content: space-aroundand it is placed either side of the item in that dimension, etc.This means that a
justify-selfproperty does not make sense in Flexbox as we are always dealing with moving the entire group of items around.On the cross axis
align-selfmakes sense as we potentially have additional space in the flex container in that dimension, in which a single item can be moved to the start and end.
Flexbox 中没有 justify-self
在主轴上 Flexbox 将我们的内容作为一个组处理。计算布置项目所需的空间量，然后剩余空间可用于分配。该
justify-content属性控制剩余空间的使用方式。Setjustify-content: flex-end并将额外空间放置在项目之前，justify-content: space-around并将其放置在该维度中项目的任一侧，等等。这意味着
justify-self属性在 Flexbox 中没有意义，因为我们总是在处理移动整个项目组。在横轴上
align-self是有意义的，因为我们可能在那个维度的 flex 容器中有额外的空间，其中单个项目可以移动到开始和结束。
There's clearly some sense to this. It's always meaningful and coherent to put alignSelf: 'center'on a flex item to ask for it to be centered on the cross axis. But what would it mean to, for instance, put justifySelf: 'center'on a flex item, to ask for it to be centered on the main axis? How is that supposed to be handled if previous flex items have already filled more than half of the space along that axis?
这显然是有一定道理的。放置alignSelf: 'center'一个 flex item 来要求它以横轴为中心总是有意义和连贯的。但是，例如，放置justifySelf: 'center'一个 flex 项目，要求它以主轴为中心是什么意思？如果之前的 flex 项目已经填充了沿该轴的一半以上的空间，应该如何处理？
Margins provide a fine solution for cases like yours. justifySelf, on the other hand, can't reasonably exist for flexbox, because the justifyContentvalues specify how to distributeflex items, and a little thought about what it would mean to instead apply them to individually specified items reveals that doing so is basically incoherent.
边距为像您这样的情况提供了很好的解决方案。justifySelf，另一方面，对于 flexbox 来说，不能合理地存在，因为这些justifyContent值指定了如何分配flex 项目，稍微考虑一下将它们应用于单独指定的项目意味着什么就会发现这样做基本上是不连贯的。
回答by MohamadKh75
You can take a look at Flex Docs!
你可以看看Flex Docs！
Adding flexDirection to a component's style determines the primary axisof its layout.
将 flexDirection 添加到组件的样式决定了其布局的主轴。
and then:
接着：
Adding alignItems to a component's style determines the alignment of children along the secondary axis(if the primary axis is row, then the secondary is column, and vice versa).
将 alignItems 添加到组件的样式确定子项沿辅助轴的对齐方式（如果主轴是行，则辅助轴是列，反之亦然）。
So your desired code will be:
所以你想要的代码是：
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);
UPDATE
更新
If you mean something like this image:
如果你的意思是这样的图片：
Then I'll suggest you this:
那我给你推荐这个：
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;
As far as i know with these props, it's the best way!
据我所知，这些道具是最好的方法！
回答by John Culviner
There is an easy way to do this without absolute positioning that works exactly how you'd expect with all items of varying heights lining up on the y-axis appropriately.
有一种简单的方法可以在没有绝对定位的情况下执行此操作，该方法完全符合您的期望，所有不同高度的项目都适当地排列在 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>
