使用flexbox布局问题？

Question

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

Answer 1

&nbsp; &nbsp;render(){&nbsp; &nbsp; &nbsp; &nbsp; let leftcontent1 = "React Native通过一个基于Flexbox的布局引擎，在所有移动平台上实现了一致的跨平台样式和布局方案";&nbsp; &nbsp; &nbsp; &nbsp; let leftcontent2 = "H";&nbsp; &nbsp; &nbsp; &nbsp; let rightcontent = "元素";&nbsp; &nbsp; &nbsp; &nbsp; return <View style={{flex:1, alignItems:'center'}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity style={styles.button} activeOpacity={0.8} onPress={this.test.bind(this,3,4)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>test 不适用匿名参数传递参数</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity style={styles.button} activeOpacity={1} onPress={()=>{this.testB(3,4)}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>testB</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={{flex:1,width:"100%",flexDirection:'row',justifyContent:"space-between"}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={[styles.item,{minWidth: 30,flexShrink:2}]}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>{leftcontent1}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={[styles.item,{minWidth: 30,marginLeft: 20,}]}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>{rightcontent}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</View>&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; }

Answer 2

<div classNames="container">&nbsp; &nbsp; <div className="a">A</div>&nbsp; &nbsp; <div&nbsp; className="c"></div>&nbsp; &nbsp; <div className="b">B</div></div>.container{&nbsp; &nbsp; display:flex;&nbsp; &nbsp; flex-direction:row;&nbsp; &nbsp; justify-content:center;&nbsp; &nbsp; align-item:space-between;}.a{&nbsp; &nbsp; flex:1 1 30px;}.b{&nbsp; &nbsp; flex:1 1 30px;}.c{&nbsp; &nbsp; width:20px;}大致这样，中间加一个20px空div，只是个思路，可能某些属性没写对，就别在意了

Answer 3

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