html - 固定宽度的中心元素，两侧有自动扩展元素

Question

我正在尝试使用 CSS3 重现下面的 HTML 表格结构。我尝试了各种 float 元素的方法，创建新的渲染上下文、自动边距、内联 block 等。

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 16px;">
    <tr>
        <td>B1, auto-expands</td>
        <td width="175">A, fixed width</td>
        <td>B2, auto-expands</td>
    </tr>
</table>

最终结果应该是一个居中的中间元素宽度、一个固定的绝对宽度和两侧的两个元素应该扩展以假定剩余的可用宽度而不与中间元素重叠。

我已经决定使用 CSS 的 display: table|table-row|table-cell，但我想知道这里是否有人有更好的方法来实现相同的结果。

Answer 1

使用 flexbox 怎么样？

HTML:

  <ul>
    <li>left, auto-expands</li>
    <li class="fix">A, fixed width</li>
    <li>right, auto-expands</li>
  </ul>

CSS:

ul {
  display: -webkit-box;
  display:    -moz-box;
  display:         box;
  padding: 0;
}

li {
  -webkit-box-flex: 1;
     -moz-box-flex: 1;
          box-flex: 1;
  list-style: none;
  border: 1px solid red;
 }

.fix {
  text-align: center;
  width: 175px;
  -webkit-box-flex: 0;
     -moz-box-flex: 0;
          box-flex: 0;
}

• 演示:http://jsbin.com/katuroxi/6
• 代码演示:http://jsbin.com/katuroxi/6/edit
• 浏览器支持:http://caniuse.com/#feat=flexbox