鍍金池/ 問答/HTML5  Java  UI  HTML/ 使用flexbox布局問題？

使用flexbox布局問題？

AB都是彈性布局
A距離B最小20
A可以壓縮B
B最小30
AB位于水平兩端
這個(gè)布局用flexbox如何實(shí)現(xiàn)呢？
如圖所示：
clipboard.png

回答
編輯回答
墨沫
.wrapper {
  display: flex;
  justify-content: space-between;
}
.left{
  width: 100%; // 這個(gè)塊想內(nèi)容撐開的話就把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>
2017年12月13日 16:34
編輯回答
夢(mèng)若殤
   render(){
        let leftcontent1 = "React Native通過一個(gè)基于Flexbox的布局引擎，在所有移動(dòng)平臺(tái)上實(shí)現(xiàn)了一致的跨平臺(tái)樣式和布局方案";
        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 不適用匿名參數(shù)傳遞參數(shù)</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>
    }
2017年8月29日 11:54
編輯回答
悶騷型
<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;
}

大致這樣，中間加一個(gè)20px空div，只是個(gè)思路，可能某些屬性沒寫對(duì)，就別在意了

2018年6月21日 07:34