html - flex 的 Chrome 显示问题

Question

我正在使用 display:flex , 我正在处理 ul 元素列表。不知道为什么我得到 2 个不同的结果: chrome 的问题: Browsers_Pic 这就是我想要做的: http://jsfiddle.net/0fbdgfcq/26/

    ul {
    max-width:800px;
    display: flex;
    flex-direction: row-reverse;
    background-color: blue;
    height: 100px;
    max-width: 500px;
    min-width: 100px;
    padding:0;
}

.box{
/* Clean */

}
.g p{
    white-space:nowrap;
    text-align:center;
    color:white;
    text-decoration:none;
    font-size:3vw;
}
.g li {
    flex: 1 0;
    width: 15%;
    height: auto;
    color:white;
    font-size:3vw;
    list-style-type: none;
    word-wrap: break-word;

}
.g img {
    width: 100%;
    height: 100%;
    max-width:100px;
    max-height:100px;

}

Answer 1

副手我会说问题是您应用的 width:15% 覆盖了列表项的 flex 。

尝试

.g li {
    flex: 1 0 15%;
}

JSfiddle