使用flexbox布局问题？

Question

AB都是弹性布局
A距离B最小20
A可以压缩B
B最小30
AB位于水平两端
这个布局用flexbox如何实现呢？
如图所示：

Answer 1

   render(){
        let leftcontent1 = "React Native通过一个基于Flexbox的布局引擎，在所有移动平台上实现了一致的跨平台样式和布局方案";
        let leftcontent2 = "H";
        let rightcontent = "元素";
        return <View style={{flex:1, alignItems:'center'}}>

            <TouchableOpacity style={styles.button} activeOpacity={0.8} onPress={this.test.bind(this,3,4)}>
                <Text>test 不适用匿名参数传递参数</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.button} activeOpacity={1} onPress={()=>{this.testB(3,4)}}>
                <Text>testB</Text>
            </TouchableOpacity>
            <View style={{flex:1,width:"100%",flexDirection:'row',justifyContent:"space-between"}}>
                <View style={[styles.item,{minWidth: 30,flexShrink:2}]}>
                    <Text>{leftcontent1}</Text>
                </View>
                <View style={[styles.item,{minWidth: 30,marginLeft: 20,}]}>
                    <Text>{rightcontent}</Text>
                </View>
               </View>
        </View>
    }

Answer 2

<div classNames="container">
    <div className="a">A</div>
    <div  className="c"></div>
    <div className="b">B</div>
</div>
.container{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-item:space-between;
}
.a{
    flex:1 1 30px;
}
.b{
    flex:1 1 30px;
}
.c{
    width:20px;
}

大致这样，中间加一个20px空div，只是个思路，可能某些属性没写对，就别在意了

Answer 3

.wrapper {
  display: flex;
  justify-content: space-between;
}
.left{
  width: 100%; // 这个块想内容撑开的话就把width去掉。
}
.right{
  margin-left: 20px;
  min-width: 30px;
  flex:none;
}
.border {
  border: 1px solid black;
  box-sizing: border-box;
}

<div class="wrapper border">
    <div class="left border">123</div>
    <div class="right border">4</div>
</div>