使用flexbox布局问题？

Question

AB都是弹性布局A距离B最小20 A可以压缩B B最小30AB位于水平两端 这个布局用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>