Question

我需要创建100％宽度＆amp; flexbox内部的高度链接。这确实可以在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>

是否有一些我不使用的前缀？我正在使用autoprefixr。另请注意：我使用的是normalize.css。

Answer 1

更新的flexbox标准仍然是新的（Chrome 29在2013年中期开始支持它没有前缀），因此Webkit可能会以稍微不同的方式解释规范 - 或者仍然可能存在缺陷。

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

为了简单起见，我删除了-prefix，但是你需要为Safari 8使用-webkit： http://caniuse.com/#search=flexbox

在玩弄这个时，我偶然发现了this question，虽然与列表或锚点无关，但似乎David Storey的想法也适用于此。基本上，由于您的li部分扩展而没有在任何地方指定100％，因此解决方案是将每个li也变为灵活方框，并为锚点赋予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/

100％宽度＆amp; height用于Webkit浏览器的flexbox内部锚点

1 个答案: