如何使用语法“flex: x”将同一行中的一个元素向左对齐，另一个元素在中间对齐

Question

我正在使用 React Native 和 Flexbox。

该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;
}

Answer 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 ，而仅用于均匀间隔所有内容。现在最终结果如下：

希望能帮助到你。如有疑问，请放心。