Question

当使用柱形包装作为柔性流动时，它似乎会导致容器在铬中的尺寸出现问题。

示例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：身体{ 保证金：0; 填充：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 nowrap; ？为什么.outer的高度就像它有一行一样？

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

我是否遗漏了某些东西，或者是否在Chrome中列了包裹？

Answer 1

请参阅我的测试here。

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：行换行正常工作
flex-flow：专栏封装适用于IE11，但不适用于Chrome 40和Firefox 34

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

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

Flexbox flex-flow柱包裹铬的错误？

1 个答案: