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內部錨點

回答

相關問題