用于 Webkit 浏览器的 flexbox 内的 100% 宽度和高度锚点答案

【问题标题】：100% width & height Anchor inside flexbox for Webkit Browsers用于 Webkit 浏览器的 flexbox 内的 100% 宽度和高度锚点
【发布时间】：2015-01-12 04:59:07
【问题描述】：

我需要在 flexbox 内创建一个 100% 宽度和高度的链接。这确实在 Firefox、IE11 中成功呈现，但不是 Chrome 等 webkit 浏览器。Webkit 扩展宽度，但 NOT 扩展至 100% 高度。在这种情况下，它只是一行文本的高度。 Firefox 和 IE11 确实将锚点扩展到列表项的整个高度。

这是 CSS：

.height-100vh  {
     height: 100vh;
}

ul.flex-column  {
     padding: 0;
     margin: 0;
}

ul.flex-column li  {
     list-style: none;
}

.flex-column  {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-flex-flow: column wrap;
     -ms-flex-flow: column wrap;
     flex-flow: column wrap;
}

.flex-cell  {
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     -moz-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
}

.flex-full  {
     width: 100%;
     height: 100%;
}

.full-anchor {
    display:block;
    width: 100%;
    height: 100%;
    background: #000;
    color: #FFF;
}

和 HTML：

<body class="height-100vh">

    <ul class="flex-column flex-full">
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
    </ul>

</body>

是否有一些我没有使用的前缀？我正在使用自动前缀。还要注意：我正在使用 normalize.css。

【问题讨论】：

标签： html css webkit flexbox

【解决方案1】：

更新后的 flexbox 标准仍然是新的（Chrome 29 于 2013 年中期开始支持它，不带前缀），所以 Webkit 可能正在以稍微不同的方式解释规范 - 或者仍有一些错误需要解决。

为.flex-cell CSS 添加可见边框确认li 元素正在扩展，只是a 元素没有： http://jsfiddle.net/w8a3rpus/66/

为简单起见，我删除了 -prefixes，但您需要 Safari 8 的 -webkit 一个： http://caniuse.com/#search=flexbox

在玩这个时，我偶然发现了this question，虽然它与列表或锚点无关，但似乎 David Storey 的想法也适用于此。基本上，由于您的 li 部分在没有指定 100% 的情况下扩展，因此解决方案是将每个 li 也放入一个 flex-box 中，并将锚点的 flex 值设置为 1：

.flex-cell  {
    display: flex;
    flex: 1;
}

.full-anchor {
    flex: 1;
    background: rgba(0,0,0,0.25);
    color: #FFF;
}

http://jsfiddle.net/w8a3rpus/68/

【讨论】：