流体半流体div

Question

​

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

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

​

这段代码创建了一个以中心为中心的div，如果浏览器窗口足够小，它将扩展到10 5em，缩小到5em。几乎我想要的一切。

是否可以在一行中创建三个div，其中中间div的行为与.mid完全一样(扩展到10 5em，收缩到5em)，左、右div在汽车上的表现类似于边距:扩展到中间.mid，如果没有足够的空间则缩小到0。

我找到的最接近的解决方案是这。唯一的问题是.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>

​