css - 如何使用 syntaxis "flex: x"将同一行中的一个元素向左对齐，另一个元素在中间对齐

Question

我正在使用使用 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;
}

Answer 1

这是一个非常巧妙的技巧，可以帮助您实现想要做的事情。display:flex 在 React Native 中不起作用，而 flex:1 和 flexDirection:'row' 起作用。请参阅以下代码及其在 expo snack 中的工作示例:

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

现在我来解释一下我做了什么，首先在父 View 中我添加了 flexDirection:'row' ，因此它的子元素将以连续的方式显示。

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

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

只是一个 View 并且不渲染 elemnt ，但仅用于平均间隔所有内容。现在最终结果如下:

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