100％宽度和高度用于Webkit浏览器的Flexbox内部锚点

我需要在Flexbox内部创建100％宽度的高度链接&。这在Firefox，IE11,中成功呈现，但未在Chrome浏览器中显示。 Webkit扩展了宽度，但是不是扩展到了100％的高度。在这种情况下，它只是一行文本的高度。 Firefox和IE11将锚点扩展到列表项的全部高度。100％宽度和高度用于Webkit浏览器的Flexbox内部锚点

这里是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。

来源

2014-11-14 Mango Web Design

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

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

我已经删除了简单的-prefixes，但你会需要-webkit一个Safari浏览器8： http://caniuse.com/#search=flexbox

虽然这种玩弄我碰到this question迷迷糊糊的，这虽然没有涉及到列表或锚，好像戴维·斯托里的思想可以在这里也适用。基本上，因为你的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/

来源

2014-11-14 20:18:01 Cascade

100％宽度和高度用于Webkit浏览器的Flexbox内部锚点

回答

相关问题