Flexbox中的flex-flow列包装错误？ [英] Flexbox flex-flow column wrap bugs in chrome?

问题描述

当使用列换行作为flex-flow时，似乎会在chrome中导致容器的尺寸出现问题。

When using column wrap as flex-flow it seems to cause problems to the container's dimensions in chrome.

示例HTML：

<div class="root">
    <div class="outer">
        <div class="inner">A</div>
        <div class="inner">B</div>
        <div class="inner">C</div>
        <div class="inner">D</div>
        <div class="inner">E</div>
        <div class="inner">F</div>
        <div class="inner">G</div>
        <div class="inner">H</div>
        <div class="inner">I</div>
        <div class="inner">J</div>
    </div>
</div>

CSS：
body {
margin：0;
padding：0;
}

CSS: body{ margin: 0; padding: 0; }

    .root{
        display: flex;
    }

    .outer{
        background-color: red;
        display: flex;
        flex-flow: column wrap;
        align-content: flex-start;
        flex: 1 0 auto;
        max-height: 400px;
    }

    .inner{
        background-color: violet;
        border: 1px solid black;
        height: 100px;
        width: 100px;
        flex: 1 0 auto;
        color: white;
        text-align: center;
        font-size: 50px;
    }

为什么.outer的宽度就像是flex-flow：row现在？
为什么.outer有一个高度，好像有一行？

Why does .outer have the width as if it was flex-flow: row nowrap; ? Why does .outer have a height as if it has a single row?

JSFiddle： http://jsfiddle.net/69jvpzef/1/

JSFiddle : http://jsfiddle.net/69jvpzef/1/

我缺少某物， in chrome？

Am i missing something or is column wrap bugged in chrome?

推荐答案

查看我的测试此处。

HTML

<div class=flex-column id=columnContainer></div>
<div class=flex-row id=rowContainer></div>

CSS

.flex-column {
    align-content: flex-start;
    border: 2px solid;
    display: inline-flex;
    flex-flow: column wrap;
    padding: 10px 0 0 10px;
    height: 330px;
    width: auto;
}
.flex-row {
    align-content: flex-start;
    border: 2px solid blue;
    display: flex;
    flex-flow: row wrap;
    padding: 10px 0 0 10px;
    height: auto;
    width: 330px;
}
.item {
    background-color: #0072c6;
    height: 100px;
    margin: 0 10px 10px 0;
    width: 100px;
    text-align: center;
    color: white;
    font: 42pt/100px 'Segoe UI Light', 'Open Sans';
}

JS

function $(id) {
    return document.getElementById(id);
}

function createItem(index) {
    var e = document.createElement('div');
    e.className = 'item';
    e.textContent = index;
    return e;
}

function render(container, itemCount) {
    for (var i = 1; i <= itemCount; i++) {
        container.appendChild(createItem(i));
    }
}

render($('rowContainer'), 13);
render($('columnContainer'), 13);

总之，

• flex-flow：row wrap 正常工作


• flex-flow：列换行 40 and Firefox 34

• flex-flow: row wrap works normally
• flex-flow: column wrap works in IE11 but not in Chrome 40 and Firefox 34

因此，这确实是一个错误。

Therefore, it is really a bug.

P / S：您应该将所有flex项目的框大小 CSS属性设置为 border-box ，否则布局将中断。

P/S: You should set the box-sizing CSS property of all flex items to border-box or the layout will break.

这篇关于Flexbox中的flex-flow列包装错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！