如何使用语法“flex：x”将同一行中的一个元素左对齐，另一个元素居中对齐答案

【问题标题】：how to align one element to the left and another in the middle in the same row using syntaxis "flex: x"如何使用语法“flex：x”将同一行中的一个元素左对齐，另一个元素居中对齐
【发布时间】：2019-12-13 21:01:56
【问题描述】：

我正在使用使用 flexbox 的 react native。

display: flex 属性不存在，但它确实存在，例如 flex: x

我正在尝试做这样的事情：

左边的元素保持占据其内容的宽度以及中心元素

我该怎么做？如果在我的代码中我使用display: flex，它可以工作，但这个属性在 react-native 中不存在。

https://jsfiddle.net/cuamqfe0/

<div class="container">
 <div>
   1
 </div>
  <div>
  2
 </div>

</div>

.container{
  flex:1;
  __display:flex;
  justify-content:center;
  align-items:flex-end;
  flex-direction:row;
  border:1px solid red;
  height: 100vh;
}

.container div{
  border:1px solid blue;
}

【问题讨论】：

一切都显示出来：RN 中默认为 flex
display:flex 适用于 react native？
你不会写它默认显示：flex
我不知道，所有默认项都有 display: flex?那么，我如何实现我需要的这种对齐方式？你能帮帮我吗？
您想在 RN 中实现您的图片中的内容吗？

标签： css react-native flexbox

【解决方案1】：

这是一个非常巧妙的技巧，可以帮助您实现您想要做的事情。 display:flex 在 react native 中不起作用，而在 flex:1 and flexDirection:'row' 中起作用。请参阅以下代码及其在博览会小吃中的工作示例：

export default class App extends React.Component {
  render() {
    return (
      <View style={{flexDirection:'row',justifyContent:'space-between'}} >
        <View style={{height:20,width:20, borderWidth:2,borderColor:'red'}}>
          <Text style={{alignSelf:'center'}}>1</Text>
        </View>
        <View style={{height:20,width:20, borderWidth:2,borderColor:'red'}}>
          <Text style={{alignSelf:'center'}}>2</Text>
        </View>
        <View style={{height:20,width:20}}>
          <Text style={{alignSelf:'center'}}></Text>
        </View>
      </View>
    );
  }
}

有效的链接是expo-link

现在我解释一下我做了什么，首先在父视图中我添加了 flexDirection:'row' ，所以它的子元素将是连续的。

现在 justifyContent:'space-between' 确保所有 3 个子元素之间的间距相等，因此，由于您没有第三个框，我刚刚创建了一个虚拟框，以便间距像第三个子元素一样完整

<View style={{height:20,width:20}}>
          <Text style={{alignSelf:'center'}}></Text>
        </View>

只是一个视图，不会渲染 elemnt ，但仅用于平均间隔所有内容。现在最终结果看起来像：

希望对您有所帮助。如有疑问，请随意。

【讨论】：

@yavg 有帮助吗？

【解决方案2】：

您可以尝试添加第三个组件并为所有三个组件添加宽度百分比，如下所示：

<View
style={{
flex: 1,
backgroundColor: "transparent",
flexDirection: "row",
justifyContent: "center",
borderWidth: 1,
borderColor: "#ffff00",
width: "100%"
}}
>
<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "#ff0000",
marginBottom: 10,
alignSelf: "flex-start"
width: "33%"
}}
onPress={() => {
takePictureAsync();
}}
>
<Icon
name="close"
type="FontAwesome"
style={{ color: "white", fontSize: 50 }}
></Icon>
</TouchableOpacity>

<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "#ff0000",
marginBottom: 10,
alignSelf: "center",
width: "34%"
}}
onPress={() => {
setShowCamera(false);
}}
>
<View style={[styles.captureBtn]}></View>
</TouchableOpacity>

<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "#ff0000",
marginBottom: 10,
alignSelf: "flex-end",
width: "33%"
}}
activeOpacity={1}
>
<View />
</TouchableOpacity>
</View>

【讨论】：