左流体のdiv、最大のmax-幅のdivの中央ストレッチ、右流体のdiv

Question

私は、次のような状況があります。

<div class="container"> 
    <div class="left"></div> 
    <div class="center"></div> 
    <div class="right"></div> 
</div> 

を私は（右、左、中央、）3回のダイブが1行であることが必要です。左と右のdivは、中央のdivの後に残るすべての空白を取る必要があります（空白の50％左、空きスペースの右50％）。中央のdivは最大値に伸びる必要がありますが、最大幅：1000pxにする必要があります。たとえば、画面の幅が<の場合、1000 divはすべての領域を占める必要があります。したがって、中心divの幅は0〜1000ピクセルです。どのようにjsなしでそれを行うには？ここでは、親のdivに

Answer 1

のcenter divは、flex-basisの1000pxからshrinkまでしか使用できません。

これはcenterは以下1000px

スニペットの最大値に伸びることを保証する。

.container { 
 
    display: flex; 
 
} 
 
.container > div { 
 
    height: 100px; 
 
    border: 1px solid black; 
 
} 
 
.left, 
 
.right { 
 
    flex: 1; 
 
} 
 
.center{ 
 
    flex: 0 1 1000px; 
 
}

<div class="container"> 
 
    <div class="left"></div> 
 
    <div class="center"></div> 
 
    <div class="right"></div> 
 
</div>

Answer 2

設定display:flex

#main { 
 
    width: 100%; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    display: -webkit-flex; /* Safari */ 
 
    display: flex; 
 
} 
 

 
#main div { 
 
    -webkit-flex: 1; /* Safari 6.1+ */ 
 
    -ms-flex: 1; /* IE 10 */ 
 
    flex: 1; 
 
    padding:20px; 
 
}

<div id="main"> 
 
    <div style="background-color:coral;">Left</div> 
 
    <div style="background-color:lightblue;max-width:1000px;">Center</div> 
 
<div style="background-color:lightgreen;">Right</div> 
 
</div>

Answer 3

はDemo

.container{ 
 
    display: flex; 
 
    align-items: center; 
 
    width: 100vw; 
 
} 
 
.container div{ 
 
    height: 100vh; 
 
    text-align: center; 
 
} 
 
.left, .right{ 
 
    flex:1; 
 
} 
 
.center{ 
 
    flex: 25; 
 
    max-width: 1000px; 
 
    background: green; 
 
} 
 
.left{ 
 
    background: red; 
 
} 
 
.right{ 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="left">left</div> 
 
    <div class="center">center</div> 
 
    <div class="right">right</div> 
 
</div>

です