Webkit 浏览器的 flexbox 内的 100% 宽度和高度锚定

Question

我需要在 flexbox 内创建一个 100% 宽度和高度的链接。 这确实可以在 Firefox、IE11 中成功呈现，但不能在 Chrome 等 webkit 浏览器中成功呈现。 Webkit的扩展宽度，但不会扩大到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。

Answer 1

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

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

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

在玩这个时，我偶然发现了这个问题，虽然它与列表或锚点无关，但似乎 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/

Webkit 浏览器的 flexbox 内的 100% 宽度和高度锚定

问题描述

1 个解决方案

解决方案1
0 2014-11-14 20:18:01

Webkit 浏览器的 flexbox 内的 100% 宽度和高度锚定

问题描述

1 个解决方案

解决方案1 0 2014-11-14 20:18:01

解决方案1
0 2014-11-14 20:18:01