流體半流體液體的div

Question

.mid{ 
 
    margin:0 auto; 
 
    max-width:10em; 
 
    min-width:5em; 
 
    border:1px solid red; 
 
}

<div class='mid'>...</div>

此代碼創建一個居中的div會擴展至10em和縮小到5EM如果瀏覽器窗口是足夠小。幾乎所有我想要的。

是否有可能在一行中創建三個div，其中中間div的行爲與.mid（擴展到10em，縮小爲5em）一樣，左右div在auto上表現爲邊距：擴展到中心.mid和如果沒有足夠的空間，則縮小到0。

我找到的最接近的解決方案是this。唯一的問題是.mid不縮小，因爲td沒有混合寬度和最大寬度。

.cont{ 
 
    display:table; 
 
    /* table-layout:fixed; /* this prevented shrinking */ 
 
    width:100%; 
 
} 
 
.cont div{ 
 
    display:table-cell; 
 
    overflow:hidden; 
 

 
    
 
} 
 
.mid{ 
 
    width:10em; /* in table width behaves like max-width*/ 
 
    border:1px solid red; 
 
}

<div class='cont'> 
 

 
    <div>left</div> 
 
    <div class='mid'>...</div> 
 
    <div>right</div> 
 
    
 
</div>

我缺少的東西，或它不可能在HTML/CSS與創建此佈局？

Answer 1

您可以使用Flex屬性：http://jsfiddle.net/7v1m5g8d/1/

.cont { 
 
    display:flex; 
 
    width:100%; 
 
    border:1px solid blue; 
 
    text-align:center; 
 
} 
 
.cont div { 
 
    flex:1; 
 
} 
 
.cont div.mid { 
 
    /* strippes for demo */ 
 
    background:repeating-linear-gradient(to right, transparent 0, transparent 0.9em, gray 0.9em, gray 1em); 
 
    min-width:5em; 
 
    max-width:10em; 
 
    flex:auto;/* reset */ 
 
    border:1px solid red; 
 
} 
 
/* do not forget to add prefix-vendor if needed or a script as prefixfree.js :) */

<div class='cont'> 
 
    <div>left</div> 
 
    <div class='mid'>...</div> 
 
    <div>right</div> 
 
</div>