在一排有两个元素，但保持不同的高度

Question

我想在一行中有两个元素，两个元素都有不同的高度。当另一个元素的高度调整时，Flexbox似乎正在调整所有元素的高度。

有什么建议吗？

示例代码：

<View style={{flex: 1, flexDirection: 'row'}}>
  <View style={{flex: 1}}>
    <Text>Some Content with a longer height</Text>
  </View>
  <View style={{flex: 1}}>
    <Text>Some Content with now the same height</Text>
  </View>
</View>

Answer 1

Flex框旨在使用您提供的可用空间，这就是为什么它非常适合从桌面扩展到平板电脑再到移动设备。

如果你想让一行中的元素具有不同的高度，你可以简单地指定一个flex项具有不同的高度（这里是一个小提琴：https://jsfiddle.net/ur0pesmd/1/）：

<强> HTML

<div class = "container">
  <div class = "flexCol"></div>
  <div class = "flexCol" id = "smaller"></div>
</div>

<强> CSS

.container{
   display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
      background: #fff;
  width: 400px;
  height: 200px;
}

.flexCol{
  flex: 1 1 auto;
  background: #f00;
}

#smaller{
  flex: 2 1 auto;
  background: #0f0;
  height: 80%;
}