<h4>说明</h4>
<div>
<img src="https://www.w3cplus.com/sites/default/files/blogs/2018/1811/flex-19.png" alt="">
</div>
<div class="outter" data-attr="Browser">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="outter2" data-attr="JavaScript">
<div class="div1"></div>
<div class="div2"></div>
</div>
.outter {
outline : solid 1px black;
display: flex;
.div1::after, .div2::after {
position: absolute;
bottom: 100%;
right: 0;
}
.div1 {
position: relative;
&::after {
content: 'flex-basis:400px;';
}
height:100px;
background : red;
flex-grow:5;
flex-shrink:5;
flex-basis:400px;
}
.div2 {
position: relative;
&::after {
content: 'flex-basis:200px;';
}
height:100px;
background : blue;
flex-grow:1;
flex-shrink:1;
flex-basis:200px; //預借空間
}
}
.outter2 {
outline : solid 1px black;
display: flex;
.div1{
flex: 5 5 auto;
height:100px;
background: red;
}
.div2{
flex: 1 1 auto;
height:100px;
background: blue;
}
}
[data-attr] {
position: relative;
margin: 10px 0;
&::before {
content: attr(data-attr);
position: absolute;
left: 50%;
top: 10px;
transform: translate(-50%, 0);
padding: 10px;
background: linear-gradient(to right, #f36, #f63);
color: #fff;
border-radius: 5px;
z-index: 2;
}
}
View Compiled
$( window ).resize(calc)
$(calc)
function calc() {
var outter_width = $('.outter').width()
var basis1 = parseInt($('.div1').css('flex-basis'))
var basis2 = parseInt($('.div2').css('flex-basis'))
var total_basis = basis1 + basis2;
var remain = outter_width - total_basis;
var shrinkWidth1 = basis1 + remain * rateShrinkPart('.div1');
var shrinkWidth2 = basis2 + remain * rateShrinkPart('.div2');
var growWidth1 = basis1 + remain * rateGrowPart('.div1');
var growWidth2 = basis2 + remain * rateGrowPart('.div2');
// console.log('-------------------------')
// console.log('shrink div1:', shrinkWidth1, `${basis1} + ${remain} * ${rateShrinkPart('.div1')}`)
// console.log('shrink div2:', shrinkWidth2, `${basis1} + ${remain} * ${rateShrinkPart('.div2')}`)
// console.log('grow div1:', growWidth1, `${basis1} + ${remain} * ${rateGrowPart('.div1')}`)
// console.log('grow div2:', growWidth2, `${basis1} + ${remain} * ${rateGrowPart('.div2')}`)
var width1 = remain > 0 ? growWidth1 : shrinkWidth1;
var width2 = remain > 0 ? growWidth2 : shrinkWidth2;
$('.outter2 > .div1').width(width1)
$('.outter2 > .div2').width(width2)
function totalShrinkPart (selector) {
var $this = $(selector);
var elems = [...$('.outter').children()];
return elems.reduce(function (sum, item, index) {
sum += shrinkPart(item)
return sum;
}, 0)
}
function shrinkPart(selector) {
var basis = parseInt($(selector).css('flex-basis'))
var shrink = parseInt($(selector).css('flex-shrink'))
return basis * shrink
}
function rateShrinkPart(selector) {
return shrinkPart(selector) / totalShrinkPart(selector);
}
function totalGrowPart (selector) {
var $this = $(selector);
var elems = [...$('.outter').children()];
return elems.reduce(function (sum, item, index) {
sum += growPart(item)
return sum;
}, 0)
}
function growPart(selector) {
var basis = 1;//parseInt($(selector).css('flex-basis'))
var grow = parseInt($(selector).css('flex-grow'))
return basis * grow
}
function rateGrowPart(selector) {
return growPart(selector) / totalGrowPart(selector);
}
}
This Pen doesn't use any external CSS resources.